SDGA Platforms Code → React 19
Saudi Arabia’s design system, as React.
An independent, MIT-licensed implementation of the DGA Platforms Code, 65 accessible React 19 components. RTL-native, dark-ready, WCAG 2.2 AA.
A government website registered with the Digital Government Authority.
Official Saudi Government websites URL ends with .gov.sa
Website belongs to an official government organization in the Kingdom of Saudi Arabia always ends with .gov.sa .
Official Reliable websites use HTTPS
Ensure the website is using the HTTPS protocol.
Registered on Digital Government Authority:
20230103200About the library
One system, every government platform.
dev-dga turns Saudi Arabia’s DGA Platforms Code into a real, installable React library - so teams ship consistent, accessible, Arabic-first products without rebuilding the basics.
Faithful to the spec
Colors, typography, spacing and components mirror the official DGA Platforms Code, measured value-for-value.
Arabic-first
Right-to-left and IBM Plex Sans Arabic are the default case, not a later patch.
Composable & typed
React 19, cva variants, asChild composition, and full TypeScript types on every prop.
MIT licensed
Independent and free to use under the MIT license. Not affiliated with the official DGA.
Installation
Install, wrap, ship.
Add the three packages, import the CSS once, and wrap your app in the provider. That’s the whole setup.
Install the packages
Import the styles once (e.g. in your root layout)
Wrap your app and start composing
Theming
One token, the whole system follows.
Swap the primary palette on the provider and every component re-tones - hover and active states are derived automatically with color-mix().
RTL & Arabic
Right-to-left is the default case.
Set dir="rtl" on the provider and the entire layout mirrors - using logical properties throughout. IBM Plex Sans Arabic covers Arabic and Latin from one family.
Renew vehicle registration
تجديد استمارة المركبة
Dark mode
Every surface reads correctly in dark.
Dark mode is built on the --ddga-* variables plus colors chosen per surface, not a mechanical inversion of light. The same component works in both modes with no divergence.
Renew vehicle registration
Renew vehicle registration
Accessibility
WCAG 2.2 AA, proven by tests.
Radix primitives for the hard widgets, real keyboard semantics tested in a browser, and axe assertions that fail the build.
Radix primitives
Menus, dialogs and tabs wrap battle-tested primitives for correct ARIA and focus management.
Real keyboard semantics
Roving tabindex, focus traps, arrow-key nav and Escape are verified in Playwright.
Tested with axe
Every component has vitest-axe assertions, so accessibility regressions fail the build.
Visible focus
A consistent focus ring on the ink color, honoring prefers-reduced-motion.
Architecture
Three packages, one direction of flow.
Tokens are the source of truth; the CSS package turns them into cascade-layered variables; the React package ships no CSS - only classes that resolve them.
Design tokens as typed TS objects - colors, type, spacing, radius, shadow.
Generated --ddga-* custom properties, reset, dark theme, and per-component styles in @layer.
React 19 components (cva + cn) emitting ddga-* classes that resolve the CSS variables.
Demo examples
Real screens, built entirely from the library.
See the components composed into complete products - dashboards and services, in Arabic and English, light and dark.
The library
65 components, grouped for how you build.
From buttons and inputs to overlays, charts, and a full app shell - each with live examples and copy-paste code.
MIT · free to use · React 19