A shadcn registry for the Saudi DGA unified design system, built on Base UI and Tailwind CSS v4.
On this page
DGA UI brings the DGA unified design system (Platforms Code, منصات الكود الموحد) to the shadcn ecosystem. You install it with the shadcn CLI, and the code lands in your project, ready to change.
Mobile · 375px
Principles
- Figma is the source of truth. Every token comes from the DGA Foundations Figma file. Where the published site CSS disagrees, Figma wins.
- Correct by default. Every foundation colour pair meets WCAG 2.1 AA in light and dark mode. Where DGA's values fall short, we fix them and log the change on Deviations from DGA.
- Arabic first. Layouts use logical properties only (
ms-*,pe-*,start-*), so a single component works in RTL and LTR. - The current shadcn pattern. Components are built on Base UI and use stable semantic classes (
cn-button,cn-button-variant-*). Thedgastyle maps those classes to DGA tokens at build time.
What's included
dga-style | Tokens (light, dark, responsive), the Tailwind v4 theme, the shadcn variable mapping and IBM Plex Sans Arabic. |
| Foundations | Colors, Typography, Spacing, Radius, Shadows and Icons. |
| Components | Coming next, starting with Button. |
Status
DGA UI is not an official DGA product. It follows the public DGA guidelines and Figma kits, and lists every place where it differs.