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
Navigation

ScrollArea

A scroll container with themed scrollbars.

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

ScrollArea needs a bounded height or width to scroll, exactly like native overflow. Pass aria-label to name the focusable region.

Vertical

Horizontal

Both axes

PreviousCollapsibleNextCarousel
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

    The Digital Government Authority regulates the digital government sector in the Kingdom of Saudi Arabia.

    It sets the policies, standards, and frameworks that government entities follow to deliver digital services.

    Its mandate covers governance, enablement, and oversight of the national digital transformation agenda.

    Scroll regions like this keep long content contained while staying keyboard accessible.

    GovernanceEnablementOversightDataSecurityInteroperabilityExperienceInnovation
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120