Modern, lightweight React component library with TypeScript support - 70+ components, tree-shakeable
npm install @amelharrak/eldo-uiA modern, lightweight, and accessible React component library.
Built for speed, styled for elegance, and engineered for everyone.
Live Demo ยท Documentation ยท Report Bug
---
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.
- ๐งฉ 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.
| 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 |
- 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
Install the package via your preferred package manager:
``bash`
npm install @amelharrak/eldo-uior
yarn add @amelharrak/eldo-uior
pnpm add @amelharrak/eldo-ui
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';
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 (
Build beautiful apps with ease.
You have successfully integrated Eldo UI components.
$3
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 ;
}
`โฟ 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 (