@amelharrak/eldo-ui

A modern, lightweight, and accessible React component library. Built for speed, styled for elegance, and engineered for everyone.

Live Demo · Documentation · Report Bug

🚀 Why Eldo UI?

Eldo UI is designed to be the foundational layer for your next React application. It combines the utility of modern component libraries with the flexibility of custom design systems.

• 🧩 60+ Components: Ready-to-use, fully typed, and tree-shakeable.
• ♿ 100% Accessible: Built with WAI-ARIA standards (WCAG 2.1) for inclusion.
• ⚡ Lightweight: <15kB gzipped (minimized bundle) with zero-bloat architecture.
• 🎨 Themeable: Built on Sass & CSS Variables for effortless customization.
• 🛠️ Developer First: Type definitions, meaningful props, and consistent APIs.
• 🔧 Framework Agnostic: Works seamlessly with Next.js (App Router ready), Vite, Remix, and CRA.

📦 Installation

Install the package via your preferred package manager:

npm install @amelharrak/eldo-ui
# or
yarn add @amelharrak/eldo-ui
# or
pnpm add @amelharrak/eldo-ui

🛠️ Setup

1. Import Styles

Add the core styles to your application's entry point (App.js, main.tsx, or layout.tsx):

import '@amelharrak/eldo-ui/css/eldo.css';

2. Usage Example

Everything is exported as named exports. Import what you need:

import { useState } from 'react';
import { Button, Modal, Card, Input } from '@amelharrak/eldo-ui';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="p-4">
      <Card>
        <Card.Header>Welcome to Eldo UI</Card.Header>
        <Card.Body>
            <p>Build beautiful apps with ease.</p>
            <div className="d-flex gap-2">
                <Input placeholder="Enter your email..." />
                <Button variant="primary" onClick={() => setIsOpen(true)}>
                    Get Started
                </Button>
            </div>
        </Card.Body>
      </Card>

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Success!">
        <p>You have successfully integrated Eldo UI components.</p>
        <Modal.Footer>
            <Button variant="secondary" onClick={() => setIsOpen(false)}>Close</Button>
            <Button variant="primary">Confirm</Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

3. Usage with Next.js (App Router)

Eldo UI components are compatible with Next.js App Router. For interactive components (using useState, useEffect), they include the "use client" directive, so they just work.

// app/page.tsx
import { Button } from '@amelharrak/eldo-ui';

export default function Page() {
  return <Button>Click Me</Button>;
}

♿ Accessibility (WAI-ARIA)

We take accessibility seriously. Every component in Eldo UI has been audited against WCAG 2.1 success criteria.

• Keyboard Navigation: Full support for Tab, Arrow keys, Escape, Enter/Space.
• Focus Management: Modals and Offcanvas panels utilize focus trapping and restoration.
• Semantic HTML: We use native elements (<button>, <input>) wherever possible.
• ARIA Roles: Explicit roles (combobox, listbox, dialog, tablist) for screen readers.

Status: ✅ 100% Compliant (Latest Audit: Jan 2026)

🧩 Component Library

Layout & Core

• Container, Row, Col (Grid System)
• Box, Stack, Spacer
• Button, ButtonGroup
• Card (Header, Body, Footer)
• Badge, Tag

Forms

• Input, Textarea
• Select, Combobox (Autocomplete)
• Checkbox, Radio, Switch
• Slider, RangeSlider
• NumberInput, InputOTP
• FileUpload

Navigation

• Navbar, Nav
• Sidebar (Responsive)
• Tabs, Breadcrumb
• Pagination, Steps
• Offcanvas (Drawer)

Feedback & Overlays

• Modal (Dialog)
• Alert, Toast, Toaster
• Tooltip, Popover
• Progress, Spinner
• Accordion, Collapse

Data Display

• Table
• Avatar, User
• Timeline
• Stat
• Carousel

🎨 Customization

Eldo UI uses CSS Variables for runtime theming and Sass for build-time customization.

CSS Variables (Quick Fix)

Override variables in your global CSS:

:root {
  --eldo-primary: #6366f1;
  --eldo-secondary: #ec4899;
  --eldo-border-radius: 0.5rem;
  --eldo-font-family: 'Inter', system-ui, sans-serif;
}

Sass (Advanced)

Import the abstract files to override defaults before compiling:

// custom.scss
$primary: #8b5cf6;
$enable-rounded: true;

@import "@amelharrak/eldo-ui/scss/eldo";

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👤 Author

Amine El Harrak

• GitHub: @aelharrak
• Website: eldo-ui.com

📄 License

Distributed under the MIT License. See LICENSE for more information.