Skip to content
Platform Codeالعربية

DGA unified design system منصات الكود الموحد

The Saudi government design system, as copy-paste React components

DGA tokens, Base UI primitives and Arabic-first layouts, installed into your project with the shadcn CLI. You own the code, and every colour pair in it is checked for WCAG AA.

npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json
Get startedBrowse components
Language
Theme

Renew national address

Update the address linked to your National ID.

Address verified
ResidentialRiyadh
Reference RNA-24810

تم استلام طلبك

سنراسلك خلال يومي عمل.

تتبع الطلب

Live components: switch language and theme above. The fields are plain markup until the form components ship.

components, each on a Base UI primitive
9
Browse components
colour pairs checked against WCAG AA, in light and dark
2,320
Open the audit
changes to the DGA files, each logged with its reason
410
Read the log
every component page shows both directions side by side
RTL + LTR
See the Button page

Components

Small compositions, built from the parts you install

Install

Three commands, and the source is in your project

  1. 1

    Create an app

    Any React project with Tailwind CSS v4. These steps use Next.js.

    npx create-next-app@latest my-app
  2. 2

    Add the DGA style

    Sets the tokens, the font, RTL and the Base UI style in components.json.

    npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json
  3. 3

    Add a component

    Copies the source into components/ui. Edit it like your own code.

    npx shadcn@latest add @dga/button

Open source

Built in the open