# Nasaq

> DESIGN SYSTEM · REACT 19 · BASE UI · TAILWIND V4

One product language for every surface: 347 components and full page templates on a token layer, in English and Arabic with real RTL. Copy them in with shadcn or install one package, and let your AI agent read every manual over MCP.

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

## At a glance

- **347** — components, each with a manual
- **23** — categories
- **10** — 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.

### 347 components on Base UI

Built on Base UI's unstyled primitives and styled with Tailwind v4. From buttons and data tables to form builders, rule builders and file explorers.

### Whole pages, not just buttons

Page-level templates you can start from: dashboards, admin areas, AI chat and agent views, a commerce kit, 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. The brand mark is never mirrored.

### Brand themes

Ten built in: Nasaq, Fady Mondy, Mahaam, Zekra, Moharrik, SeatFor, Health Debug, CircleXO, Hosbah and Orchestra. Set one with the brand prop on NasaqProvider.

### 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 to Claude Code, Cursor or any MCP client.

## One package, three surfaces

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

The React 19 components and templates, plus tokens, themes and brand marks.

### 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

Two ways in. Copy components into your app with the shadcn CLI, or install the package. Either takes under a minute.

1. shadcn: point the CLI at the Nasaq registry

Add the @nasaq namespace to the registries in components.json.

```bash
"registries": {
  "@nasaq": "https://nasaq-ui.fadymondy.com/r/{name}.json"
}
```

2. shadcn: add components

The source lands in your app and is yours to edit. The tokens and provider come with the first one.

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

3. Or install the package

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

4. Import the styles into your Tailwind entry

Adjust the @source path to where your node_modules lives.

```bash
@import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
@source "../node_modules/@fadymondy/nasaq/dist/web";
```

## Questions

### Registry or npm package: which one?

Use the shadcn registry when you want the source in your app to edit. Use @fadymondy/nasaq when you want a versioned dependency, the React Native kit or the Electron helpers. Both are generated from the same source, so they do not drift.

### How mature is it?

This is version 0.1.0. Of the 347 components, 49 are marked stable and 298 beta, so expect APIs to move before 1.0.

### 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.

## 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://nasaq-mcp.fadymondy.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