---

🚀 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, backed by professional-grade tooling and quality assurance.

$3

- 🧩 70+ Components: Ready-to-use, fully typed, and tree-shakeable components covering all common UI patterns.
- ♿ 100% Accessible: Built with WAI-ARIA standards (WCAG 2.1) for inclusion and keyboard navigation.
- ⚡ Lightweight: <15kB gzipped (minimized bundle) with Zero Dependencies (only React peer deps).
- 🎨 Themeable: Built on Sass & CSS Variables for effortless customization and runtime theming.
- 💡 IDE Autocomplete: Full TypeScript definitions with IntelliSense support for all components and props.
- 📚 Complete Documentation: Professional JSDoc documentation for every component, prop, and method.
- ✅ Fully Tested: Comprehensive unit test suite ensuring reliability and stability in production.
- 🛠️ Developer First: Consistent APIs, meaningful prop names, and excellent developer experience.
- 🔧 Framework Agnostic: Works seamlessly with Next.js (App Router ready), Vite, Remix, and CRA.

$3

| Metric | Status | Details |
|--------|--------|---------|
| Components | ✅ 70+ | All major UI patterns covered |
| Documentation | ✅ 100% | Complete JSDoc for all components |
| TypeScript | ✅ Full Support | IDE autocomplete & type safety |
| Unit Tests | ✅ Comprehensive | Production-ready test coverage |
| Accessibility | ✅ WCAG 2.1 | Keyboard navigation & screen readers |
| Bundle Size | ✅ <15kB | Tree-shakeable & optimized |

$3

- IntelliSense Support: Get instant prop suggestions and documentation in your IDE
- Type Safety: Catch errors at compile-time with full TypeScript definitions
- Consistent APIs: Learn once, use everywhere with predictable component patterns
- Professional Standards: Built with the same quality standards as enterprise libraries

📦 Installation

Install the package via your preferred package manager:

``bash
npm install @amelharrak/eldo-ui


or

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

`javascript
import '@amelharrak/eldo-ui/css/eldora.css';
`

$3

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

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

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

return (


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.

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

export default function Page() {
return Click Me;
}
`

♿ 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 (, ) wherever possible.
- ARIA Roles: Explicit roles (combobox, listbox, dialog, tablist) for screen readers.

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

🧩 Component Library

$3

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

$3

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

$3

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

$3

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

$3

- Table
- Avatar, User
- Timeline
- Stat
- Carousel

🎨 Customization

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

$3

Override variables in your global CSS:

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

$3

Import the abstract files to override defaults before compiling:

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

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

🤝 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.