Noor UI

Beautiful RTL-first React components for bilingual applications. Built with Radix UI, Tailwind CSS, and full Arabic/English support.

Features

✨ RTL-First Design - Built from the ground up with RTL languages in mind 🌍 Bilingual Support - Seamless English/Arabic language switching ♿ Accessible - WCAG 2.1 compliant components 🎨 Themeable - Multiple built-in themes with easy customization 📦 Tree-shakeable - Import only what you need ⚡ TypeScript - Full type safety out of the box 🕌 GCC-Specific - Components for Gulf region markets (Prayer Times, Hijri Calendar, Zakat Calculator)

Installation

npm install @ositaka/noorui

Quick Start

import { NoorProvider } from '@ositaka/noorui';
import '@ositaka/noorui/styles.css';

function App() {
  return (
    <NoorProvider locale="ar" direction="rtl">
      <YourApp />
    </NoorProvider>
  );
}

Documentation

For full documentation, visit noorui.com

Components

Core Components

• Button, Card, Badge, Avatar, Separator, Label, Input
• Alert, Toast, Dialog, Sheet, Popover, Tooltip
• Select, Checkbox, Radio Group, Switch, Slider
• Tabs, Accordion, Collapsible
• Table, Data Table, Pagination
• Command Menu, Dropdown Menu, Context Menu

Advanced Components

• Dashboard Shell
• User Menu
• Notification Center
• Stepper
• File Upload
• Rich Text Editor
• Date Picker, Time Picker
• Number Input

GCC-Specific Components

• Prayer Times
• Hijri Date
• Arabic Number
• Zakat Calculator

AI/LLM Components

• Chat Message
• Prompt Input
• Thinking Indicator
• Message Actions
• Model Selector
• Parameter Slider
• Token Counter
• Conversation History
• Workflow Canvas
• Workflow Node

Requirements

• React 18+
• Tailwind CSS 3.4+
• Node.js 18+

License

MIT © Nuno Marques

Links

• 🌐 Website
• 📚 Documentation
• 🐛 Issues
• 💬 Discussions

Made with ❤️ for the bilingual web