# dev-dga

> An independent, MIT-licensed React 19 implementation of Saudi Arabia's DGA "Platforms Code"
> national design system. 65 accessible components: RTL-native, Arabic-first,
> dark-mode ready, RSC-compatible, WCAG 2.2 AA. Not affiliated with the official DGA.

Install: `npm i @dev-dga/react @dev-dga/css @dev-dga/tokens`

Every page below also exists in Arabic under the `/ar` prefix
(for example https://dev-dga-hub.vercel.app/ar/components/button).

## Docs

- [Installation](https://dev-dga-hub.vercel.app/installation): install, wrap in DgaProvider, theme via CSS variables.
- [Styling with Tailwind](https://dev-dga-hub.vercel.app/installation#styling): three recipes (no Tailwind, Tailwind v3, Tailwind v4), the cascade-layer rules, and a live bridge demo.
- [Components](https://dev-dga-hub.vercel.app/components): all 65 components. Each page has when-to-use guidance, live examples, a props table generated from the typings, and accessibility notes.
- [Blocks](https://dev-dga-hub.vercel.app/blocks): prebuilt UI blocks composed from the components.
- [Theme Studio](https://dev-dga-hub.vercel.app/theme): edit every --ddga-* design token live and export CSS.
- [Arabic & RTL](https://dev-dga-hub.vercel.app/rtl): Hijri calendars, abjad counters, bidi-safe Saudi data.
- [Accessibility](https://dev-dga-hub.vercel.app/accessibility): WCAG 2.2 AA conformance statement.
- [Platforms Code compliance](https://dev-dga-hub.vercel.app/compliance): component-by-component parity with the official DGA Figma.
- [Templates](https://dev-dga-templates.vercel.app/): the DGA home page template and a Saudi National Day template, built only from @dev-dga. Arabic and English, light and dark.

## Styling

`@dev-dga/css` is plain CSS in two cascade layers (ddga-base, ddga-components). Tailwind is optional;
both majors get every DGA token as utilities (bg-primary, text-ink, rounded-lg, text-display-md, max-w-dga):

- `@dev-dga/css/tailwind.css`: Tailwind v4 bridge, an `@theme inline` block plus `@custom-variant dark` on [data-theme='dark']; import it after '@dev-dga/css'.
- `@dev-dga/tokens/tailwind-preset`: the same keys as a Tailwind v3 preset (ESM and CJS), darkMode ['selector', '[data-theme="dark"]'].

## Actions & buttons

- [Button](https://dev-dga-hub.vercel.app/components/button): The primary interactive control - variants, sizes, loading, asChild.
- [FloatingButton](https://dev-dga-hub.vercel.app/components/floating-button): A standalone floating action button (FAB) for a primary page action.
- [Link](https://dev-dga-hub.vercel.app/components/link): A styled, accessible text link with variants and external affordances.
- [Toggle](https://dev-dga-hub.vercel.app/components/toggle): A two-state button that stays pressed - bold/underline style controls.
- [ContentSwitcher](https://dev-dga-hub.vercel.app/components/content-switcher): A segmented control for switching between mutually exclusive views.

## Form inputs

- [TextInput](https://dev-dga-hub.vercel.app/components/text-input): A single-line text field with affixes, dropdowns, and validation states.
- [Textarea](https://dev-dga-hub.vercel.app/components/textarea): A multi-line text field that grows with its content.
- [NumberInput](https://dev-dga-hub.vercel.app/components/number-input): A numeric field with stepper buttons and min/max/step.
- [Select](https://dev-dga-hub.vercel.app/components/select): A Radix-backed listbox for choosing one option from many.
- [Dropdown](https://dev-dga-hub.vercel.app/components/dropdown): A form dropdown input supporting single and multiple selection.
- [Checkbox](https://dev-dga-hub.vercel.app/components/checkbox): A checkbox with indeterminate state and field wiring.
- [Radio](https://dev-dga-hub.vercel.app/components/radio): A radio group - one choice from a small, visible set.
- [Switch](https://dev-dga-hub.vercel.app/components/switch): An on/off toggle for a single binary setting.
- [Slider](https://dev-dga-hub.vercel.app/components/slider): A range slider for single values or dual-thumb ranges.
- [Rating](https://dev-dga-hub.vercel.app/components/rating): A star rating input, keyboard-operable and half-step aware.
- [InputOTP](https://dev-dga-hub.vercel.app/components/input-otp): A segmented one-time-passcode input.
- [TagInput](https://dev-dga-hub.vercel.app/components/tag-input): An input that collects free-form values as removable tags.
- [SearchBox](https://dev-dga-hub.vercel.app/components/search-box): A search field composing TextInput, with optional voice affordance.
- [FileUpload](https://dev-dga-hub.vercel.app/components/file-upload): A drag-and-drop file upload with validation and progress.
- [DatePicker](https://dev-dga-hub.vercel.app/components/date-picker): A calendar date field supporting Gregorian and Hijri systems.
- [DateRangePicker](https://dev-dga-hub.vercel.app/components/date-range-picker): A dual-calendar range picker built on the same calendar core.
- [Chip](https://dev-dga-hub.vercel.app/components/chip): A compact, selectable chip - filters, choices, and removable tokens.

## Data display

- [Card](https://dev-dga-hub.vercel.app/components/card): A composable content surface - image, header, body, footer, expandable.
- [Tag](https://dev-dga-hub.vercel.app/components/tag): A small label for categorization and metadata.
- [StatusTag](https://dev-dga-hub.vercel.app/components/status-tag): A semantic status pill - success, warning, error, info.
- [Avatar](https://dev-dga-hub.vercel.app/components/avatar): A user avatar with image, fallback, status dot, and groups.
- [Divider](https://dev-dga-hub.vercel.app/components/divider): A horizontal or vertical rule, optionally with a label.
- [DescriptionList](https://dev-dga-hub.vercel.app/components/description-list): Term/description pairs for key–value detail views.
- [List](https://dev-dga-hub.vercel.app/components/list): Ordered and unordered lists with consistent rhythm.
- [StructuredList](https://dev-dga-hub.vercel.app/components/structured-list): A lightweight tabular list for structured rows.
- [Metric](https://dev-dga-hub.vercel.app/components/metric): A KPI tile - value, change delta, and inline trend chart.
- [Quote](https://dev-dga-hub.vercel.app/components/quote): A pull quote / blockquote with attribution.
- [Timeline](https://dev-dga-hub.vercel.app/components/timeline): A vertical timeline of events with markers and status.
- [Table](https://dev-dga-hub.vercel.app/components/table): A composable data table - header, body, footer, caption.
- [AspectRatio](https://dev-dga-hub.vercel.app/components/aspect-ratio): A container that locks its children to a fixed ratio.
- [DigitalStamp](https://dev-dga-hub.vercel.app/components/digital-stamp): A government verification bar with official SDGA marks.
- [CodeSnippet](https://dev-dga-hub.vercel.app/components/code-snippet): A code block with tabs, line numbers, copy, and always-LTR code.
- [SaudiRiyal](https://dev-dga-hub.vercel.app/components/saudi-riyal): The official Riyal symbol with SDGA-compliant amount formatting - fixed symbol, RTL-aware sign, numerals.

## Data visualization

- [Charts](https://dev-dga-hub.vercel.app/components/charts): Pie, line, and bar charts using the DGA categorical color scale.

## Feedback

- [InlineAlert](https://dev-dga-hub.vercel.app/components/inline-alert): An inline, in-flow message with semantic variants and actions.
- [Notification](https://dev-dga-hub.vercel.app/components/notification): A prominent, dismissible notification banner.
- [NotificationToast](https://dev-dga-hub.vercel.app/components/notification-toast): A toast system with an imperative toast() API and viewport.
- [Tooltip](https://dev-dga-hub.vercel.app/components/tooltip): A Radix tooltip with a HelpIcon convenience trigger.
- [Spinner](https://dev-dga-hub.vercel.app/components/spinner): An indeterminate loading spinner in several sizes.
- [Skeleton](https://dev-dga-hub.vercel.app/components/skeleton): A shimmering placeholder for loading content.
- [Progress](https://dev-dga-hub.vercel.app/components/progress): Linear and circular progress indicators.
- [EmptyState](https://dev-dga-hub.vercel.app/components/empty-state): A zero-data state with media, message, and actions.

## Overlays

- [Modal](https://dev-dga-hub.vercel.app/components/modal): A centered dialog with header icon, body, and footer actions.
- [Drawer](https://dev-dga-hub.vercel.app/components/drawer): A side sheet for secondary flows and detail panels.
- [Popover](https://dev-dga-hub.vercel.app/components/popover): A non-modal floating panel anchored to a trigger.
- [SlideoutMenu](https://dev-dga-hub.vercel.app/components/slideout-menu): A slide-in navigation panel for app-level menus.
- [DropdownMenu](https://dev-dga-hub.vercel.app/components/dropdown-menu): An action menu with items, checkboxes, radios, and submenus.
- [Menubar](https://dev-dga-hub.vercel.app/components/menubar): A desktop-style horizontal menu bar with nested menus.
- [Filtration](https://dev-dga-hub.vercel.app/components/filtration): A faceted filter panel - overlay or inline, with staged apply.
- [Command](https://dev-dga-hub.vercel.app/components/command): A ⌘K command palette for fast, searchable actions.

## Navigation

- [Tabs](https://dev-dga-hub.vercel.app/components/tabs): Switch between related panels with a roving tablist.
- [Breadcrumb](https://dev-dga-hub.vercel.app/components/breadcrumb): A hierarchical trail with overflow collapsing.
- [Pagination](https://dev-dga-hub.vercel.app/components/pagination): Page navigation with an underline-bar current page and jump-to.
- [Accordion](https://dev-dga-hub.vercel.app/components/accordion): Vertically stacked, collapsible sections.
- [ProgressIndicator](https://dev-dga-hub.vercel.app/components/progress-indicator): A stepper showing progress through a multi-step flow.
- [Collapsible](https://dev-dga-hub.vercel.app/components/collapsible): A single show/hide disclosure region.
- [ScrollArea](https://dev-dga-hub.vercel.app/components/scroll-area): A styled, cross-browser custom scroll container.
- [Carousel](https://dev-dga-hub.vercel.app/components/carousel): A swipeable slide carousel with arrows and dots.

## App shell

- [Sidebar](https://dev-dga-hub.vercel.app/components/sidebar): A collapsible application sidebar with groups, menus, and rail.

## Provider & utilities

- [DgaProvider](https://dev-dga-hub.vercel.app/components/dga-provider): The root provider - theme, direction, dark mode, and the overlay portal.

## Source

- [GitHub](https://github.com/DevDhaif/dev-dga-hub)
- [npm: @dev-dga/react](https://www.npmjs.com/package/@dev-dga/react)
- [Sitemap](https://dev-dga-hub.vercel.app/sitemap.xml)