Skip to main content
Noor UI
Documentation

Noor UI

Built for the GCC market. Arabic and English, equal citizens.

A comprehensive, modern design system with full bilingual support. 74+ accessible components, 4 beautiful themes, perfect RTL mirroring. Bringing light to multilingual interface design.

Quick Start

Install via npm and start building in minutes

v0.4.2Published
$ npm install noorui-rtl
import { Button, Card, Input } from 'noorui-rtl'

export default function App() {
  return (
    <Card>
      <Button>Get Started</Button>
    </Card>
  )
}

Everything You Need

Production-ready components for modern web applications

74+ Components

Complete UI toolkit from buttons to complex data tables, plus experimental AI/LLM components

True Bilingual

RTL-first architecture with perfect Arabic support

Accessible

WCAG AA compliant with full keyboard navigation

4 Themes

From minimal to artistic, all from the same tokens

Token-Based

Customize everything through design tokens

Modern Stack

Built with Next.js 14, TypeScript, and Tailwind CSS

Themes

Choose from 4 beautiful themes, all powered by the same design tokens

Minimal

Clean design with lots of white space and subtle borders

  • •Maximum readability
  • •Subtle borders
  • •Generous spacing
  • •Focused content

Futuristic

Dark theme with gradients and glassmorphism effects

  • •Dark mode optimized
  • •Gradient accents
  • •Glassmorphism
  • •Enterprise feel

Cozy

Warm tones with softer corners and gentle shadows

  • •Warm color palette
  • •Rounded corners
  • •Soft shadows
  • •Personal touch

Artistic

Typography-focused with elegant serif accents

  • •Typography emphasis
  • •Serif accents
  • •Creative layouts
  • •Poetry-friendly

Active Theme Preview

See how components look with the selected theme

Get Started

1

Installation

npm install noorui-rtl
2

Usage

import { Button } from 'noorui-rtl'

<Button variant="primary">
  Submit
</Button>

Ready to go!

Your components will automatically support RTL when the direction changes.