# DGA UI

> A shadcn registry for the Saudi DGA unified design system, built on Base UI and Tailwind CSS v4. Arabic-first (RTL), light and dark, WCAG 2.1 AA.

Install: `npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json`, then `npx shadcn@latest add @dga/button`.
Every docs page is available as Markdown at its URL plus `.md`. Full text: https://dga.omqkhafi.dev/llms-full.txt

- **Getting started**
- [Introduction](https://dga.omqkhafi.dev/docs/index.md): A shadcn registry for the Saudi DGA unified design system, built on Base UI and Tailwind CSS v4.
- [Installation](https://dga.omqkhafi.dev/docs/installation.md): Add the DGA style to a new or existing project with the shadcn CLI.
- [Deviations from DGA](https://dga.omqkhafi.dev/docs/deviations.md): Every place DGA UI differs from the DGA Figma source, with the original value, ours, and the reason.

- **Foundations**
- [Colors](https://dga.omqkhafi.dev/docs/foundations/colors.md): DGA primitives, semantic tokens for light and dark, and their WCAG contrast ratios.
- [Typography](https://dga.omqkhafi.dev/docs/foundations/typography.md): IBM Plex Sans Arabic, the DGA type scale and its responsive modes.
- [Spacing](https://dga.omqkhafi.dev/docs/foundations/spacing.md): The 4px spacing scale, component spacing tokens, breakpoints, grids and logical properties.
- [Radius](https://dga.omqkhafi.dev/docs/foundations/radius.md): DGA corner radii.
- [Shadows](https://dga.omqkhafi.dev/docs/foundations/shadows.md): DGA elevation shadows and backdrop blurs.
- [Icons](https://dga.omqkhafi.dev/docs/foundations/icons.md): Hugeicons, the DGA icon set, with RTL mirroring rules.

- **Components**
- [Button](https://dga.omqkhafi.dev/docs/components/button.md): Triggers an action. Six styles, destructive and on-colour versions, three sizes, icon-only and loading.
- [Spinner](https://dga.omqkhafi.dev/docs/components/spinner.md): Shows that a process is running. Seven sizes, primary, neutral and on-colour.
- [Link](https://dga.omqkhafi.dev/docs/components/link.md): Takes the user to another page or section. Primary, neutral and on-colour, two sizes, inline and external.
- [Badge](https://dga.omqkhafi.dev/docs/components/badge.md): A short label for a status, count or category. Seven colours, filled or outlined, three sizes.
- [Tag](https://dga.omqkhafi.dev/docs/components/tag.md): Labels for categories, filters and statuses. Tag and Status Tag, filled or outlined, three sizes, optionally removable.
- [Divider](https://dga.omqkhafi.dev/docs/components/divider.md): A thin line that separates content into sections. Horizontal or vertical, four colours.
- [Avatar](https://dga.omqkhafi.dev/docs/components/avatar.md): A person's picture, initials or a generic icon. Seven sizes, circle or square, and avatar groups.
- [Featured Icon](https://dga.omqkhafi.dev/docs/components/featured-icon.md): An icon in a tinted container that leads cards, empty states and dialogs. Light, hard and outlined, six colours.
- [Skeleton](https://dga.omqkhafi.dev/docs/components/skeleton.md): Placeholders shown while content loads. Rectangle, square, circle and line in the Figma sizes.