# 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

Source: https://docs.nasaqui.com/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 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.

## Pick your stack