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

StatusTag

A dot-and-label pill for showing state.

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

StatusTag pairs a colored dot with a short label. Set tone for the meaning and status for the fill; use Tag for categories instead.

Tones

Status styles

Sizes (Arabic)

PreviousTagNextAvatar
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

    ActivePendingFailedIn progressDraft
    SubtleGhostInverted
    قيد المراجعةقيد المراجعةقيد المراجعة