# Installation

Add the DGA style to a new or existing project with the shadcn CLI.

DGA UI needs a React project with Tailwind CSS v4. These steps use Next.js. Other frameworks are covered at the end.

## New project

<Steps>
<Step>

### Create a Next.js app

```bash title="Terminal"
npx create-next-app@latest my-app --ts --tailwind --app
```

</Step>
<Step>

### Initialise DGA UI

```bash title="Terminal"
npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json
```

`dga` is a `registry:base` item. It writes `components.json` with `iconLibrary: "hugeicons"`, `rtl: true`, the Base UI style and the `@dga` registry, so `npx shadcn@latest add @dga/button` works straight away. It installs `@base-ui/react`, `cn`, `class-variance-authority` and Hugeicons. It also adds every DGA token, the dark theme and the responsive modes to `globals.css`, and sets up IBM Plex Sans Arabic with `next/font`.

</Step>
<Step>

### Set the language and direction

```tsx title="app/layout.tsx"
<html lang="ar" dir="rtl">
```

Use `lang="en" dir="ltr"` for English pages. Components need no other change.

</Step>
</Steps>

## Existing shadcn project

If the project already has a `components.json`, add the style directly:

```bash title="Terminal"
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-style.json
```

The CLI merges DGA's values into your `globals.css`. Your existing shadcn variables (`--background`, `--primary` …) now point at DGA tokens.

## Tokens only

To use the DGA tokens without any components (for example in an existing design system), add just the tokens:

```bash title="Terminal"
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-tokens.json
```

## Use the `@dga` namespace

`init …/dga.json` registers it for you. In other projects, register it once in `components.json`:

```json title="components.json"
{
  "registries": {
    "@dga": "https://dga.omqkhafi.dev/r/{name}.json"
  }
}
```

Then install items by name:

```bash title="Terminal"
npx shadcn@latest add @dga/button @dga/badge
```

## Dark mode

Dark tokens apply under either `.dark` (next-themes, shadcn) or `[data-theme="dark"]` (the DGA site convention). Both work on `<html>` or on any element, so a single section can be dark.

```tsx title="page.tsx"
<section data-theme="dark">…</section>
```

## Other frameworks

For Vite, React Router or TanStack Start, run the same `init` command. Outside Next.js the CLI installs the font from `@fontsource/ibm-plex-sans-arabic` instead of `next/font`.

## What gets installed

| Item | Type | Contents |
| --- | --- | --- |
| [`dga`](/r/dga.json) | `registry:base` | `components.json` settings (Hugeicons, RTL, Base UI style, `@dga` registry); pulls in `dga-style` |
| [`dga-style`](/r/dga-style.json) | `registry:style` | Dependencies, CSS imports and the `cn-*` component style map; pulls in `dga-tokens`, `utils` and the font |
| [`dga-tokens`](/r/dga-tokens.json) | `registry:theme` | Every token, light and dark themes, responsive modes, Tailwind theme, shadcn mapping, base layer |
| [`utils`](/r/utils.json) | `registry:lib` | `lib/utils.ts`, which re-exports `cn` from the `cn` package (no clsx or tailwind-merge) |
| [`font-ibm-plex-sans-arabic`](/r/font-ibm-plex-sans-arabic.json) | `registry:font` | IBM Plex Sans Arabic 400–700, Arabic and Latin subsets |