2025-09-21

Noor UI – Tailwind-based UI Component Library

Noor UI is a Tailwind-based UI library focused on speed, accessibility, and developer experience.
It provides prebuilt, themeable components for building scalable interfaces with React (then Rust Desktop).

Project Status

Here’s the current progress roadmap for Noor UI:

• [x] Theme configuration system

  • [x] Color tokens (primary, secondary, success, danger)
  • [x] Typography scale (font sizes, weights, line-height)
  • [x] Spacing & radius system
  • [x] Dark/light theme support

• [x] Form components

  • [x] Input (variants, sizes, states)
  • [x] Checkbox (checked, indeterminate)
  • [x] Switch (with on/off icons)
  • [x] Radio (group support)
  • [x] Textarea (group support)
  • [ ] Phone number
  • [ ] Autocomplete
  • [ ] Select
  • [ ] Datepicker (day, week, month, year, hour)

• [x] Layout components

  • [x] Grid system
  • [x] Flex wrapper
  • [x] Container with breakpoints

• [ ] Data components

  • [x] Image, Avatar, Divider
  • [x] Video
  • [ ] Table
  • [x] List
  • [ ] Tooltip
  • [x] Popover
  • [ ] Carousel

• [ ] Feedback components

  • [x] Alert
  • [ ] Backdrop
  • [ ] Dialog
  • [x] Progress/loader
  • [x] Skeleton
  • [ ] Notification

• [ ] Surface

  • [x] Accordion
  • [ ] Appbar
  • [ ] Card
  • [ ] Paper

• [ ] Navigation

  • [ ] Bottom navigation
  • [ ] Breadcrumbs
  • [ ] Drawer
  • [ ] Link
  • [ ] Dropdown menu
  • [-] Pagination
  • [x] Stepper
  • [ ] Tabs

• [ ] Layout

  • [ ] Box
  • [ ] Stack
  • [ ] Image list
  • [ ] Sidebar

• [ ] Charts

  • [ ] Pie chart
  • [ ] Line chart
  • [ ] Bar chart

• [ ] Utils

  • [ ] useMediaQuery

• [ ] Blocks

  • [ ] Navbar
  • [ ] Footer
  • [ ] Hero section
  • [ ] About section
  • [ ] Coming soon section
  • [ ] Newsletter section
  • [ ] Team section
  • [ ] Authentification
  • [ ] Dashboard

Why Noor UI?

Most component libraries are either too bloated or too minimal. Noor UI strikes a balance:

• Built on top of TailwindCSS for maximum flexibility
• Full theme configurability (colors, fonts, spacing, etc.)
• Ready-to-use React & Vue components
• DX focused — intuitive props, TypeScript support
• Accessibility baked in (ARIA support, keyboard navigation)

Installation

npm install noor-ui