# Nasaq

> DESIGN SYSTEM · v1.0 · REACT · VUE · BLADE · ALPINE

One product language for every stack: 390 components and full page templates on a token layer, in English and Arabic with real RTL. The same markup ships for React, Vue, Laravel Blade and plain HTML with Alpine, and your AI agent can read every manual over MCP.

```bash
npm i @fadymondy/nasaq
```

## At a glance

- **390** — components, each with a manual
- **5** — stacks: React, shadcn, Vue, Blade, Alpine
- **17** — brand themes
- **EN · AR** — with real RTL

## Features

### A token layer, not a theme file

Colour, type, spacing, density and expression are --nq-* CSS variables, for light and dark. Change a token and every component follows, in every stack.

### Every component in every stack

All 390 components exist in React (on Base UI), Vue 3, Laravel Blade with Livewire and Filament, and plain HTML with Alpine. The markup and Tailwind classes match, so a page looks the same whichever you pick.

### Whole pages, not just buttons

Page-level templates you can start from: dashboards, admin areas, AI chat and agent views, a store and checkout, a POS register, HR attendance, a docs shell and marketing sections.

### Arabic and RTL, for real

Components carry English and Arabic strings and lay out right-to-left, with direction-aware icons. Prices default to USD, and SAR in Arabic. The brand mark is never mirrored.

### 17 brand themes

Nasaq, Fady Mondy, Mahaam, Zekra, Moharrik, SeatFor, Health Debug, CircleXO and its business brands, Hosbah, Orchestra and ToGO. Set one with the brand prop, or data-brand in HTML.

### Made to be read by AI agents

Every component ships a README manual with props, examples, accessibility and RTL notes. An MCP server hands those manuals, with the code for your stack, to Claude Code, Cursor or any MCP client.

## One design, every stack

### React (@fadymondy/nasaq/web)

React 19 on Base UI, plus tokens, themes and brand marks. Or copy the source in with shadcn.

### Vue 3 (@fadymondy/nasaq/vue)

Nq* components with v-model, registered by a plugin or imported one by one.

### Laravel Blade (fadymondy/nasaq-php)

<x-nq::*> components with Livewire wire:model support and a FilamentPHP plugin.

### HTML + Alpine (@fadymondy/nasaq/alpine)

Plain markup with Alpine behaviours, from a CDN script tag or your bundler.

### React Native (@fadymondy/nasaq/native)

The native kit, with the same tokens and RTL handling.

### Electron (@fadymondy/nasaq/electron)

Window chrome and main-process helpers for desktop apps.

## Get started

Pick your stack. Each takes under a minute, and the docs show every component in all of them.

1. React with shadcn: point the CLI at the Nasaq registry

Add the @nasaq namespace to components.json, then add components. The source is yours to edit.

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

npx shadcn@latest add @nasaq/button @nasaq/data-table
```

2. React or Vue: install the package

Then import the styles into your Tailwind entry. No Tailwind? Import @fadymondy/nasaq/nasaq.css instead.

```bash
npm i @fadymondy/nasaq

@import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
```

3. Laravel: require the Composer package

The service provider is auto-discovered. Add @nasaqStyles and @nasaqScripts to your layout.

```bash
composer require fadymondy/nasaq-php
```

4. Plain HTML: two script tags

```bash
<script defer src="https://cdn.jsdelivr.net/npm/@fadymondy/nasaq/dist/cdn/nasaq-alpine.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
```

## Questions

### Which stack should I use?

Whatever your app is already in. React gets the shadcn registry (source you edit) or the npm package (a versioned dependency). Vue and HTML + Alpine use the same npm package; Laravel uses fadymondy/nasaq-php. All of them are built from one design, so they do not drift.

### How mature is it?

This is version 1.0. Of the 390 components, 49 are marked stable and 341 beta: their APIs follow semver, but beta components may still gain props.

### Does it work without Arabic?

Yes. English is the default and RTL only applies when the locale is Arabic.

### What is the licence?

MIT, open source at github.com/fadymondy/nasaq and github.com/fadymondy/nasaq-php.

## Give your AI agent the manuals

### Hosted (HTTP)

Nothing to install. Add it to Claude Code with one command.

```
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp
```

### Local (stdio)

Runs on your machine from the npm package. It needs no tokens and no network.

```
claude mcp add nasaq -- npx -y @fadymondy/nasaq-mcp
```

Source: https://github.com/fadymondy/nasaq