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 3.4+
- TypeScript 5+ (recommended)
Tailwind Configuration
Configure Tailwind CSS to work with Noor UI. This includes adding the RTL plugin and tailwindcss-logical for bidirectional support.
⚠️Important
Make sure to include the Noor UI package in your content array so Tailwind can detect and compile the component styles.
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