Installation

codebase runs on the same setup as ui.shadcn.com: Next.js, Tailwind CSS v4 (CSS-first, no tailwind.config.js), and shadcn/ui on Base UI with the vega style, RTL enabled.

New project

Scaffold the app and initialize shadcn/ui in one command:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --template next --base base --preset vega --rtl
Copy

This creates components.json (style base-vega), app/globals.css with the theme tokens and @import "shadcn/tailwind.css", lib/utils.ts (re-exporting cn from the cn package), and installs @base-ui/react.

Existing project

Run init from the project root and answer the prompts:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --base base --preset vega --rtl
Copy

Make sure the @ alias points at your source folder in tsconfig.json:

Copy{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Add the codebase registry

Register the @codebase namespace in components.json:

Copy{
  "registries": {
    "@codebase": "https://cb.databayt.org/r/{name}.json"
  }
}

Add components

Primitives come from shadcn, atoms and templates from codebase:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button card
npx shadcn@latest add @codebase/metric @codebase/hero-07
Copy

Atoms install to components/atom/. Templates add their page under app/<name>/ plus their components and an English/Arabic dictionary. See Upstream for how codebase maps to shadcn/ui.