{
  "id": 11197509,
  "title": "Labanaat UI",
  "url": "https://urgent.news/2026/10/01/labanaat-ui",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-01T13:13:54.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/azikwe/labanaat-ui-3d27"
  },
  "original_language": "en",
  "account": "Labanaat UI, a React component library, has been launched to explore the development of a comprehensive, reusable UI system. The name, derived from Arabic word Labanaat meaning \"building blocks,\" signifies its core principle: composable building blocks for crafting modern React interfaces.\n\nThis library offers 47 React components, encompassing essential elements like Kanban, DataGrid, Calendar, Chart, and more. It also features token-based theming using CSS variables, tree-shakeable component entry points, interactive documentation with live, editable examples, three application templates, and accessibility testing using axe-core and component tests.\n\nTo get started, install it via npm using the command `npm install @labanaat/ui`. The website for Labanaat UI is available at labanaat.com, and you can find the GitHub repository at Mohammed-Saif-Ibrahim / labanaat.\n\nLabanaat UI aims to be a production-grade, composable React component library that is accessible by default, themeable using design tokens, and designed to feel cohesive as a single product rather than a collection of separate components.",
  "summary": "🚀 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 •…",
  "key_points": [
    "Labanaat UI is a React component library",
    "Offers 47 components like Kanban and Calendar",
    "Aims to be production-grade and accessible"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}