Guides
Get started
Nasaq is one design system for every stack. React, Vue, Blade and plain HTML all render the same markup with the same Tailwind classes, so a button, a dialog or a data table looks and behaves the same
Nasaq is one design system for every stack. React, Vue, Blade and plain HTML all render the same markup with the same Tailwind classes, so a button, a dialog or a data table looks and behaves the same in a Next.js app, a Nuxt app, a Filament panel or a static page. Brands, dark mode, density, Arabic and RTL work in all of them.
| Stack | What you install | Components look like |
|---|---|---|
| React (Next.js, Vite, Remix) | @fadymondy/nasaq from npm | <Button> from @fadymondy/nasaq/web |
| shadcn | Each component's source, copied in by the shadcn CLI | <Button> from @/components/ui/button |
| Inertia | @fadymondy/nasaq on the client, Laravel on the server | the React or Vue components |
| Vue 3 and Nuxt | @fadymondy/nasaq from npm | <NqButton> from @fadymondy/nasaq/vue |
| Laravel, Livewire, Filament, TomatoPHP | fadymondy/nasaq-php from Composer | <x-nq::button> Blade components |
| Plain HTML + Alpine.js | Two files from the CDN | the HTML Blade renders, run by Alpine |
Pick your stack below. Every component page then has the same tabs: each shows that component's code for your stack and a live preview, with a copy button.