DGA React components

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.

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.

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.

Pie, line, and bar charts using the DGA categorical color scale.

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.

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.

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.

A collapsible application sidebar with groups, menus, and rail.

The root provider - theme, direction, dark mode, and the overlay portal.