Getting Started
Learn how to install and configure Noor UI in your Next.js project. Built with RTL-first principles for seamless bidirectional support.
Installation
Install the Noor UI package using your preferred package manager:
Prerequisites
- Next.js 14+ (App Router)
- React 18+
- Tailwind CSS 4.1+
- TypeScript 5+ (recommended)
Tailwind Configuration
Configure Tailwind CSS v4 to work with Noor UI using the CSS-first approach. Design tokens and theme configuration are defined directly in your CSS file.
⚠️Important
Tailwind v4 uses automatic content detection — no content array is needed. Just make sure noorui-rtl is installed and your CSS imports @import "tailwindcss".
Provider Setup
Wrap your application with the required providers. This enables RTL direction switching, theming, tooltips, and toast notifications.
1. Create Providers Component
2. Update Root Layout
Provider Responsibilities
- DirectionProvider: Manages LTR/RTL direction state globally
- DesignSystemProvider: Handles theme (light/dark) state
- TooltipProvider: Required for all Tooltip components
- Toaster: Required for toast notifications to appear
Global Styles
Add the design system CSS variables to your global stylesheet:
Quick Start
You're all set! Start using components in your application:
Working with RTL
Use the direction hook to programmatically control or respond to direction changes:
RTL Best Practices
- Use logical properties (ms-, me-, ps-, pe-) instead of directional ones (ml-, mr-, pl-, pr-)
- Test all components in both LTR and RTL modes
- Use the direction toggle during development to verify layouts
- Icons and images should mirror appropriately for RTL