Saudi NDS UI

Installation

Choose your framework to get started:

Add the DGA Registry

After initialization, add the DGA registry to your components.json to enable short-hand @dga/ imports:

{
  "registries": {
    "@dga": "https://nds.aboalrejal.com/r/{name}.json"
  }
}

Installing Components

Add any component to your project with a single command:

pnpm dlx shadcn@latest add https://nds.aboalrejal.com/r/[component].json

Example

After installing the Button component:

1import { Button } from "@/components/ui/button"
2
3export default function Home() {
4return (
5  <div>
6    <Button>Click me</Button>
7  </div>
8)
9}

Components

Supported Frameworks

DGA Components work seamlessly with the most popular frameworks in the ecosystem:

• Next.js — Full App Router support with server components
• React + Vite — Lightning-fast development with HMR
• Laravel — Inertia.js integration with Blade templates
• Astro — Static-first with island architecture (coming soon)
• TanStack Start — Type-safe full-stack React (coming soon)

Why DGA Components?

• Based on Platforms Code — Follows the DGA national design system guidelines

• RTL First — Native right-to-left support for Arabic interfaces

• IBM Plex Sans Arabic — Typography used in government applications

• Accessible — WCAG 2.1 AA compliant components

• Open Source — Free to use in any Saudi government or private sector project