Next.js

Install and configure DGA Registry components for Next.js.

Choose the setup that matches your starting point.

Scaffold with the CLI

Create Project

Run the init command to scaffold a new Next.js project. Follow the prompts to configure your project.

pnpm dlx shadcn@latest init --preset b0 --template next

For a monorepo project, use the --monorepo flag:

pnpm dlx shadcn@latest init --preset b0 --template next --monorepo

Existing Project

Create Project

If you need a new Next.js project, create one with create-next-app. Otherwise, skip this step.

npx create-next-app@latest

Choose the recommended defaults so Tailwind CSS, the App Router, and the default @/* import alias are configured for you.

If you prefer a src/ directory, use --src-dir or choose Yes when prompted:

npx create-next-app@latest --src-dir

Run the CLI

Run the shadcn init command to set up shadcn/ui in your existing project:

pnpm dlx shadcn@latest init

Configure DGA Registry

Add the DGA Registry

Add the DGA registry to your components.json to enable @dga/ imports:

{
  "registries": {
    "@dga": "https://dga-registry.vercel.app/r/{name}.json"
  }
}

Add the Design Tokens

Add this import to the top of your globals.css:

@import "../styles/tokens.css";

This loads all DGA color tokens, spacing, and typography variables.

Arabic (RTL) Support

Need RTL support? Re-run init with the --rtl flag:

pnpm dlx shadcn@latest init --preset b0 --template next --rtl

Add Components

You can now start adding components to your project:

pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/button.json

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

npx shadcn@latest add button -c apps/web

Example Usage

The command above will add the Button component to your project. You can then import it like this:

1import { Button } from "@/components/ui/button"
2
3export default function Home() {
4return (
5  <div>
6    <Button>Click me</Button>
7  </div>
8)
9}

If you created a monorepo, update apps/web/app/page.tsx and import from @workspace/ui/components/button instead.