Configuration
Complete configuration guide for integrating Noor UI into your Next.js application.
1. Tailwind CSS Configuration
Update your Tailwind config to include the design system components and enable logical properties:
Key Configuration Points
- • Include the design system package path in content array
- • Add tailwindcss-logical plugin for RTL support
- • Enable darkMode: ["class"] for theme switching
2. Provider Setup
Create a providers file to wrap your app with necessary context providers:
Update Root Layout
Important
The suppressHydrationWarning prop on the HTML tag prevents hydration warnings when using theme and direction providers.
3. CSS Variables
Add design token CSS variables to your global stylesheet:
4. Environment Variables (Optional)
Configure default settings using environment variables: