dev-dga
ComponentsComplianceAccessibilityArabic & RTLInstallationStorybook

Actions & buttons

ButtonFloatingButtonLinkToggleContentSwitcher

Form inputs

TextInputTextareaNumberInputSelectDropdownCheckboxRadioSwitchSliderRatingInputOTPTagInputSearchBoxFileUploadDatePickerDateRangePickerChip

Data display

CardTagStatusTagAvatarDividerDescriptionListListStructuredListMetricQuoteTimelineTableAspectRatioDigitalStampCodeSnippetSaudiRiyal

Data visualization

Charts

Feedback

InlineAlertNotificationNotificationToastTooltipSpinnerSkeletonProgressEmptyState

Overlays

ModalDrawerPopoverSlideoutMenuDropdownMenuMenubarFiltrationCommand

Navigation

TabsBreadcrumbPaginationAccordionProgressIndicatorCollapsibleScrollAreaCarousel

App shell

Sidebar

Provider & utilities

DgaProvider
Data display

Card

A composable surface for grouped content.

Open in Storybook ↗import { Card }from '@dev-dga/react'

Card is a set of parts. Combine a header, content, and footer as needed.

Basic card

With icon

PreviousChipNextTag
dev-dga

Saudi Arabia’s DGA Platforms Code, as accessible React 19 components.

Explore

ComponentsInstallationTheme studioBlocksExamplesStorybook

Proof

ComplianceAccessibilityArabic & RTL

Project

GitHubMIT Licensenpm · @dev-dga/react

Independent implementation, free to use under the MIT license. Not affiliated with, nor endorsed by, the official Saudi Digital Government Authority (DGA).

Built by Dhaifallah Alfarawi · @DevDhaif

MIT · built with @dev-dga

    Project Atlas

    Last updated 2 hours ago.

    A cross-ministry data platform delivering unified access to national registries, with role-based controls and full audit trails.

    Secure by default

    WCAG 2.2 AA · RTL-native · dark-ready.

    Every component ships accessible primitives and inherits theme and direction from a single provider.