The library
DGA React components
Every UI component in the library, live and themeable: accessible, RTL-native React 19 components implementing the Saudi SDGA Platforms Code. Search or filter by category, then open any component for interactive examples and copy-paste code.
65 components
Actions & buttons
Controls that trigger an action or a change in state.
The primary interactive control - variants, sizes, loading, asChild.
A standalone floating action button (FAB) for a primary page action.
A styled, accessible text link with variants and external affordances.
A two-state button that stays pressed - bold/underline style controls.
A segmented control for switching between mutually exclusive views.
Form inputs
Fields and controls for collecting input, with built-in field a11y.
A single-line text field with affixes, dropdowns, and validation states.
A multi-line text field that grows with its content.
A numeric field with stepper buttons and min/max/step.
A Radix-backed listbox for choosing one option from many.
A form dropdown input supporting single and multiple selection.
A checkbox with indeterminate state and field wiring.
A radio group - one choice from a small, visible set.
An on/off toggle for a single binary setting.
A range slider for single values or dual-thumb ranges.
A star rating input, keyboard-operable and half-step aware.
A segmented one-time-passcode input.
An input that collects free-form values as removable tags.
A search field composing TextInput, with optional voice affordance.
A drag-and-drop file upload with validation and progress.
A calendar date field supporting Gregorian and Hijri systems.
A dual-calendar range picker built on the same calendar core.
A compact, selectable chip - filters, choices, and removable tokens.
Data display
Surfaces and primitives for presenting content and records.
A composable content surface - image, header, body, footer, expandable.
A small label for categorization and metadata.
A semantic status pill - success, warning, error, info.
A user avatar with image, fallback, status dot, and groups.
A horizontal or vertical rule, optionally with a label.
Term/description pairs for key–value detail views.
Ordered and unordered lists with consistent rhythm.
A lightweight tabular list for structured rows.
A KPI tile - value, change delta, and inline trend chart.
A pull quote / blockquote with attribution.
A vertical timeline of events with markers and status.
A composable data table - header, body, footer, caption.
A container that locks its children to a fixed ratio.
A government verification bar with official SDGA marks.
A code block with tabs, line numbers, copy, and always-LTR code.
The official Riyal symbol with SDGA-compliant amount formatting - fixed symbol, RTL-aware sign, numerals.
Data visualization
Charts built on the DGA categorical palette.
Feedback
Status, progress, and transient messaging.
An inline, in-flow message with semantic variants and actions.
A prominent, dismissible notification banner.
A toast system with an imperative toast() API and viewport.
A Radix tooltip with a HelpIcon convenience trigger.
An indeterminate loading spinner in several sizes.
A shimmering placeholder for loading content.
Linear and circular progress indicators.
A zero-data state with media, message, and actions.
Overlays
Layers that float above the page - all portal into the provider root.
A centered dialog with header icon, body, and footer actions.
A side sheet for secondary flows and detail panels.
A non-modal floating panel anchored to a trigger.
A slide-in navigation panel for app-level menus.
An action menu with items, checkboxes, radios, and submenus.
A desktop-style horizontal menu bar with nested menus.
A faceted filter panel - overlay or inline, with staged apply.
A ⌘K command palette for fast, searchable actions.
Navigation
Wayfinding, sequencing, and content disclosure.
Switch between related panels with a roving tablist.
A hierarchical trail with overflow collapsing.
Page navigation with an underline-bar current page and jump-to.
Vertically stacked, collapsible sections.
A stepper showing progress through a multi-step flow.
A single show/hide disclosure region.
A styled, cross-browser custom scroll container.
A swipeable slide carousel with arrows and dots.
App shell
Structural layout for full applications.
Provider & utilities
The runtime context, hooks, and helpers that tie it together.