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

Pagination

Page navigation for lists and tables.

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

Mark the current page with isActive, and use the paginationRange helper to keep the pager a stable width across pages.

Static pager

Sizes

Stateful pager with paginationRange

PreviousBreadcrumbNextAccordion
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

    • 1
    • 2
    • 3
    • 99
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
    • 4
    • 5
    • 20