Install, wrap, and control every token.

#Requirements

dev-dga targets modern React and any bundler that can import a CSS file.

#Install the packages

Three packages: the React components, the compiled CSS, and the design tokens. Install all three together.

npm i @dev-dga/react @dev-dga/css @dev-dga/tokens

#Import the styles once

Import the stylesheet a single time at the root of your app (e.g. your root layout or entry file). It ships the reset, tokens, dark theme, and every component style.

// app/layout.tsx (Next.js) or your entry fileimport '@dev-dga/css';

Because the design system lives in @layer ddga-base / ddga-components, any unlayered rule of yours overrides it without !important.

#Wrap your app in the provider

DgaProvider supplies direction, dark mode, the brand theme, and the portal root that overlays (modals, tooltips, toasts) render into. Mount it once, near the root, above everything that uses the library.

import { DgaProvider } from '@dev-dga/react';import '@dev-dga/css';export default function App({ children }) {  return (    <DgaProvider dir="rtl" mode="light" theme={{ primary: 'saGreen' }}>      {children}    </DgaProvider>  );}

DgaProvider props

#Theme the primary palette

The whole system re-tones from one value. Pass theme.primary in any of three forms - hover and active states are derived automatically with color-mix().

1. 1

   A built-in palette name

   One of saGreen, info, success, warning, error, gray.

2. 2

   Any CSS color

   A hex, rgb, or oklch string. Hover and active are derived for you.

3. 3

   An explicit triplet

   Full control via { base, hover, active, foreground } when you need exact values.

// 1 - a built-in palette name<DgaProvider theme={{ primary: 'info' }}>…</DgaProvider><DgaProvider theme={{ primary: '#7C3AED' }}>…</DgaProvider><DgaProvider  theme={{    primary: {      base: '#1B8354',      hover: '#166A45',      active: '#104631',      foreground: '#FFFFFF',    },  }}>  …</DgaProvider>

#Override any design token

Every color, radius, space, font, and shadow is a --ddga-* CSS variable declared in @layer ddga-base. Redeclare one anywhere - globally on :root, or scoped to a subtree - and the system follows. No build step, no Sass.

Token groups

/* your globals.css - imported AFTER '@dev-dga/css' */:root {  --ddga-radius-md: 4px;          /* squarer corners, system-wide */  --ddga-color-primary: #0f766e;  /* teal brand */  --ddga-font-ar: 'Cairo', sans-serif;}.compact {  --ddga-card-padding: var(--ddga-space-3);  --ddga-radius-lg: 6px;}

Scope overrides to a subtree by setting the variables on any wrapper element - the cascade does the rest, in light and dark.

#Theme builder

A quick taste - tweak a few tokens and watch the preview re-tone. For complete control over all 188 tokens, open the full Theme Studio.

@import '@dev-dga/css'; /* the DGA design system (index.css) - load it first */:root {  /* Adjust any control below to generate token overrides */}

#Dark mode

Dark mode is a curated token set, not a mechanical inversion. Drive it with the provider’s mode prop, or by toggling data-theme="dark" on a wrapper. Apply it before first paint (as this site does) to avoid a flash.

// Controlled by the provider<DgaProvider mode="dark">…</DgaProvider><div data-theme="dark"></div>

#RTL & Arabic

Set dir="rtl" and the entire layout mirrors through logical properties - no per-component work. IBM Plex Sans Arabic covers Arabic and Latin from one family, so mixed content stays consistent.

<DgaProvider dir="rtl" locale="ar"></DgaProvider>

#Next steps

You’re set up. Here’s where to go from here: