Skip to main content

Installation

Get started with Noor UI in minutes. Follow these simple steps to add the package to your Next.js project.

Prerequisites

  • Next.js 14+

    App Router required for full functionality

  • React 18.3+

    For client components and hooks

  • Tailwind CSS 3.4+

    Required for styling and logical properties

  • TypeScript 5+

    Recommended for type safety

Choose Your Package Manager

Select your preferred package manager to install Noor UI:

npm

Yarn

pnpm

Bun

Import Styles

Import the pre-compiled CSS file in your root layout. This includes all component styles, CSS variables, theme definitions, and RTL support.

No Tailwind Setup Required

The pre-compiled CSS includes everything you need. No Tailwind configuration or additional setup required!

Package Dependencies

The design system will automatically install the following peer dependencies:

Note

The package includes tailwindcss-logical for RTL support. Make sure your project is configured to use logical CSS properties.

Verify Installation

Test that the package is installed correctly by importing a component:

Installation Successful!

If there are no import errors, the package is installed correctly. Next, configure Tailwind and set up providers.

Next Steps