Add the DGA style to a new or existing project with the shadcn CLI.
On this page
DGA UI needs a React project with Tailwind CSS v4. These steps use Next.js. Other frameworks are covered at the end.
New project
Create a Next.js app
npx create-next-app@latest my-app --ts --tailwind --appInitialise DGA UI
npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.jsondga 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.
Set the language and direction
<html lang="ar" dir="rtl">Use lang="en" dir="ltr" for English pages. Components need no other change.
Existing shadcn project
If the project already has a components.json, add the style directly:
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-style.jsonThe 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:
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-tokens.jsonUse the @dga namespace
init …/dga.json registers it for you. In other projects, register it once in components.json:
{
"registries": {
"@dga": "https://dga.omqkhafi.dev/r/{name}.json"
}
}Then install items by name:
npx shadcn@latest add @dga/button @dga/badgeDark 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.
<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 | registry:base | components.json settings (Hugeicons, RTL, Base UI style, @dga registry); pulls in dga-style |
dga-style | registry:style | Dependencies, CSS imports and the cn-* component style map; pulls in dga-tokens, utils and the font |
dga-tokens | registry:theme | Every token, light and dark themes, responsive modes, Tailwind theme, shadcn mapping, base layer |
utils | registry:lib | lib/utils.ts, which re-exports cn from the cn package (no clsx or tailwind-merge) |
font-ibm-plex-sans-arabic | registry:font | IBM Plex Sans Arabic 400–700, Arabic and Latin subsets |