Installation

Ritla UI installs as source. The CLI copies each component into your project, installs what it depends on and sets up the theme tokens once, so the code is yours to read and change.

Requirements#

• A React project using Tailwind CSS v4: Next.js or Vite.
• Node.js and a package manager (npm, pnpm, yarn or bun).
• A Ritla UI license key for paid items. Free items, such as @ritla/core, need none.

Set up your project#

Run this once, at the root of your app:

npx ritla init

It detects your framework, your Tailwind setup and your import aliases, writes a ritla.json that records them, adds the Kanz theme tokens to your CSS, and installs @ritla/core: the bidi isolate, the numerals formatter and the Arabic typography preset every component builds on.

Add components#

npx ritla add phone-input card-details button

Each component lands in your components folder as a file you own. Components that use other components bring them along, and their npm dependencies are installed for you. Every component page lists its exact command under Installation.

Your license key#

Paid items are served only to a request that carries your license key. Keep the key in your environment, never in the repository:

RITLA_LICENSE_KEY=your-key npx ritla add phone-input

npx ritla login walks you through storing it for your machine, and your CI reads it from its own secrets.

Using shadcn instead#

The registry speaks the shadcn format, so the shadcn CLI and the tools built on it can install Ritla UI too. Register the @ritla namespace in components.json:

{
  "registries": {
    "@ritla": {
      "url": "https://ritla.app/r/{name}.json",
      "headers": { "Authorization": "Bearer ${RITLA_LICENSE_KEY}" }
    }
  }
}

Then add components by name:

npx shadcn@latest add @ritla/phone-input

The Ritla CLI is the main path; this one is for projects that already run on shadcn.