@dev-dga/css

The stylesheet behind DGA React components: CSS for the SDGA Platforms Code (DGA, Digital Government Authority) design system, Saudi Arabia's (KSA) national reference for government digital platforms. An independent, MIT-licensed implementation. Reset, custom properties, dark theme, RTL/Arabic, and per-component styles. Plain CSS in cascade layers (@layer ddga-base, ddga-components); no JS runtime.

Independent implementation, free to use under the MIT license. Not affiliated with, nor endorsed by, the Saudi Digital Government Authority (DGA).

Pairs with @dev-dga/react, but works with any framework or none.

Install

npm install @dev-dga/css

Usage

Import once at your app entry:

import '@dev-dga/css';

That bundles the reset, variables, dark theme rule, and every component's styles. To cherry-pick instead:

import '@dev-dga/css/variables.css';
import '@dev-dga/css/reset.css';
import '@dev-dga/css/dark.css';
import '@dev-dga/css/components/button.css';

Theming is driven by data-theme="light|dark" and dir="ltr|rtl" on a container element. @dev-dga/react's <DgaProvider> sets both for you.

Tailwind v4

@dev-dga/css/tailwind.css is a generated Tailwind v4 theme file: an @theme inline block that maps the DGA tokens to utilities as var(--ddga-*) references, plus a dark variant on [data-theme='dark']. The Tailwind compiler consumes it, not the browser. Import it after the library:

@layer theme, base, ddga-base, ddga-components, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
@import '@dev-dga/css';
@import '@dev-dga/css/tailwind.css';

Tailwind v3 uses the preset from @dev-dga/tokens/tailwind-preset instead.

Docs

Live Storybook · Docs, examples & issues

License

MIT