๐ Iโve launched Labanaat UI โ a React component library I built to explore what it takes to create a complete, reusable UI system.
Labanaat (ูุจูุงุช) means โbuilding blocksโ in Arabic โ reflecting the idea behind the library: composable building blocks for creating modern React interfaces.
๐งฑ Whatโs included
โข 47 React components โ including Kanban, DataGrid, Calendar, Chart, and more
โข Token-based theming using CSS variables
โข Tree-shakeable component entry points
โข Interactive docs with live, editable examples
โข 3 application templates
โข Accessibility testing with axe-core + component tests
โข Monorepo setup with TypeScript, CI, and automated build/test workflows
๐ฆ Try it
npm install @labanaat/ui
๐ Website:
๐ป GitHub:
Mohammed-Saif-Ibrahim
/
labanaat
A modern React UI component library built for developers.
Labanaat UI
A production-grade, composable React component library โ accessible by default, themeable to the token, and built to feel like one product instead of forty-seven separate ones bolted together
What is Labanaat UI?
Labanaat (ูุจูุงุช) means "building blocks" in Arabic โ a fitting name for a library built around real, composable pieces rather than a wall of configuration props.
It's a full React component platform, not just a button and a modal:
- 47 components, from foundational (Button, Input, Card) through application-shell (Sidebar, Navbar, CommandPalette) to genuinely advanced (Kanban with real drag-and-drop, DataGrid with resizable columns, Chart, Calendar with range selection).
- Accessible by construction. Complex patterns โ Dialog, Select Combobox, Tabs โ use Radix Primitives internally for keyboard/focus behavior that's been proven across thousands of production apps; where no primitive exists (Combobox, Calendar), the WAI-ARIA pattern is implemented directly instead of reaching for an unmaintained dependency.
- Themeable down toโฆ
Current version: v0.9.0
Itโs still a work in progress โ particularly around real-browser QA for some of the newer components โ but the library is now available to use and explore.
If anyone here works with React / TypeScript / design systems, Iโd really appreciate feedback on the components, API, docs, or anything else that could be improved.
Would love to know what you think! ๐
Top comments (0)