Installation

PersianLabs/ui is distributed as a shadcn-compatible registry, so there's no package to install and no version to chase. If your project already has shadcn configured, skip to step 2.

1. Initialize shadcn

Run the standard shadcn init once — nothing about this step is specific to this registry.

$ npx shadcn@latest init

You can also use the equivalent for your package manager (pnpm dlx, yarn dlx, bunx --bun), or point shadcn directly at this registry:

$ npx shadcn@latest init -r https://ui.persian-labs.ir/r/registry.json

2. Add a component

Add any component by its registry namespace — the CLI copies the source straight into your project and wires dependencies automatically.

$ npx shadcn@latest add @persianlabsui/tabs

The direct-URL form also works:

$ npx shadcn@latest add https://ui.persian-labs.ir/r/tabs.json

To install everything the registry offers in one command, use the bundle endpoint:

$ npx shadcn@latest add https://ui.persian-labs.ir/r/registry.json

3. Requirements

RequirementNotes
React 19+Components are built against modern React.
TypeScript 5+All source ships typed.
Tailwind CSS v4Uses the v4 CSS-first configuration.
Base UI@base-ui/react — resolved automatically as a registry dependency.
lucide-reactIcons used across components.

4. First render

After adding a component, import it and drop it into your page:

import { Button } from "@/components/ui/button"
 
export function App() {
  return <Button>ذخیره</Button>
}

Next steps

  • Theming — copy the CSS color tokens into your globals.css.
  • RTL — confirm dir="rtl" and the logical-property conventions.
  • Fonts — pick a Persian font stack that pairs with the components.