Nasaq (نسق)

One product language, every surface. Nasaq is a design system of --nq-* tokens, seventeen brand themes and 390 components, built for light, dark, LTR and RTL. The same markup ships for React, shadcn, Vue 3, Laravel Blade (Livewire, Filament) and plain HTML with Alpine.js, and an MCP server teaches it to your AI.

Browse components Get started Brand themes Open the lab

1. Add the preset

Tokens, brands, the cn util and NasaqProvider. Every component depends on it.

npx shadcn@latest add https://docs.nasaqui.com/r/nasaq.json

2. Register Nasaq in components.json

Then add any component by short name: npx shadcn@latest add @nasaq/button.

{  "registries": {    "@nasaq": "https://docs.nasaqui.com/r/{name}.json"  }}

Or install from npm

The same components as a package, if you prefer a dependency to copied files.

pnpm add @fadymondy/nasaq

Other stacks

Vue 3, Laravel, Livewire and Filament, Inertia and plain HTML + Alpine.js. Every component page has a live preview and the code for each stack.