Noor UI

نور — "Light" in Arabic

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

Documentation · Storybook · Examples · npm

Features

• RTL-First — Perfect Arabic/Persian support with logical CSS properties
• 77+ Components — Complete UI toolkit from buttons to dashboards
• Well-Tested — 690+ unit tests covering props, variants, RTL behavior, a11y, and keyboard navigation
• Accessible — WCAG AA compliant with full keyboard navigation
• TypeScript — Full type safety and IntelliSense
• Themeable — 4 built-in themes, light/dark mode, customizable design tokens
• Regional & Islamic — Prayer Times, Hijri Calendar, Arabic Numbers, Zakat Calculator
• AI/LLM Components — Chat, Streaming Text, Model Selector, Token Counter
• Tree-shakeable — Only bundle what you use

Quick Start

npm install noorui-rtl

import 'noorui-rtl/dist/styles.css'
import { Button, Card, CardHeader, CardTitle, CardContent } from 'noorui-rtl'

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Noor UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

For RTL support, Tailwind setup, theming, and provider configuration, see the Getting Started guide.

Components

Forms — Button, Input, Textarea, Checkbox, Radio, Select, Switch, Slider, DatePicker, TimePicker, FileUpload, NumberInput, Calendar, Form

Layout — Card, Separator, Tabs, Accordion, Collapsible, DashboardShell, Stepper

Navigation — Breadcrumb, Pagination, Command

Feedback — Alert, Callout, Toast, Progress, Skeleton, Badge, Avatar, LoadingSpinner, Kbd

Overlays — Dialog, Sheet, Popover, Tooltip, DropdownMenu, ContextMenu

Data — Table, DataTable, Chart, StatsCard, ListingCard, FeatureCard, EmptyState, Timeline, Blockquote

Regional & Islamic — PrayerTimes, HijriDate, ArabicNumber, ZakatCalculator

AI/LLM — ChatMessage, PromptInput, StreamingText, ThinkingIndicator, ModelSelector, TokenCounter, ParameterSlider, ConversationHistory, MessageActions

Composite — Carousel, NotificationCenter, UserMenu, ReactionPicker, UserBadge

Browse all components at noorui.com/components or in Storybook.

Documentation

• Getting Started — Installation, CSS setup, providers
• Components — All 77+ components with live examples
• RTL Guide — Logical properties, bidirectional patterns
• Themes — Built-in themes and custom theme creation
• Design Tokens — CSS variables reference
• Examples — Full application demos (Healthcare, Banking, Hotel, Esports, MyMantras)
• Email Templates — 21 bilingual MJML templates
• Storybook — Interactive component playground
• llms.txt — AI assistant integration

Contributing

Contributions are welcome! See the Contributing Guide.

This project includes Claude Code agents for component creation, story generation, visual QA, and i18n validation.

Support

• Discord
• GitHub Discussions
• GitHub Issues

Credits

Built with Radix UI, Tailwind CSS, Phosphor Icons, and Next.js.

License

MIT

Built with love by Nuno Marques