Skip to main content

Quick Start

Start building with Noor UI in under 5 minutes. This guide will get you from zero to your first component.

Your First Component

Let's start with the simplest component - a Button:

Preview:

Building a Card

Cards are perfect for displaying grouped content:

This card automatically adjusts padding, borders, and shadows for both LTR and RTL layouts!

Creating Forms

Combine multiple components to create interactive forms:

Note

Form components automatically handle RTL text input direction and placeholder alignment.

Working with Direction

Add direction switching to your components using the useDirection hook:

Complete Page Example

Here's a complete dashboard page using multiple components:

What's Next?