@dev-dga/react

React 19 components for the DGA (Digital Government Authority) design system , Saudi Arabia's national reference for government digital platforms.

Accessible (WCAG 2.2 AA), RTL-native, dark-mode ready. Ships no CSS , pair with @dev-dga/css.

Install

npm install @dev-dga/react @dev-dga/css

Requires react@^19 and react-dom@^19 (peer dependencies).

Usage

import '@dev-dga/css'; // required , components ship no styles
import { DgaProvider, Button, Input, Textarea, Checkbox } from '@dev-dga/react';

export default function App() {
  return (
    <DgaProvider>
      <Button>Hello</Button>
      <Input label="Email" type="email" helperText="We'll never share it." />
    </DgaProvider>
  );
}

For RTL or dark mode, configure the provider:

<DgaProvider dir="rtl" mode="dark">
  {/* … */}
</DgaProvider>

Components

Button · Input · Textarea · Checkbox · DgaProvider , plus cn (clsx), useDga, and useDir.

Docs

Live Storybook · Source

License

MIT