DESIGN SYSTEM · REACT 19 · BASE UI · TAILWIND V4

Nasaq

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.

nasaq · catalog347 components

Commercepos-register · catalog-store · checkout-steps
37
Analyticsfunnel-chart · web-vitals-page · keyword-tracker
27
Developerapi-keys · deploy-view · feature-flags
26
Formsform-builder · phone-input · currency-input
25
AIcopilot-chat · agent-steps · ai-citations
16
and 18 more categoriesapp-shell · data-table · dashboard-board · docs-shell
216

npm i @fadymondy/nasaq

Open the docs View on GitHub

347
components, each with a manual
23
categories
10
brand themes
EN · AR
with real RTL

React 19 · Base UI · Tailwind v4
347 components
English and Arabic, real RTL
MCP server for AI agents
MIT licensed

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.

A first screen

Wrap the app in NasaqProvider. It owns theme, brand, density and direction, and switches to RTL when the locale is Arabic.

npm packageapp.tsx

tsx

import { Button, NasaqProvider } from "@fadymondy/nasaq/web"

export function App() {
  return (
    <NasaqProvider brand="nasaq" defaultLocale="ar">
      <Button>Save</Button>
    </NasaqProvider>
  )
}

shadcn (copied in)app.tsx

tsx

import { Button } from "@/components/ui/button"

export function App() {
  return <Button>Save</Button>
}

One package, three surfaces

@fadymondy/nasaq ships a subpath for each. The shadcn registry covers the web components; the native kit and Electron helpers are npm only.

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.

Give your AI agent the manuals

Six tools: get_setup, list_components, search_components, get_component, get_foundation and list_tokens. The agent finds the right component and reads how to use it, RTL rules included.

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

Get started

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

01
shadcn: point the CLI at the Nasaq registry
Add the @nasaq namespace to the registries in components.json.
```
"registries": {
  "@nasaq": "https://nasaq-ui.fadymondy.com/r/{name}.json"
}
```
02
shadcn: add components
The source lands in your app and is yours to edit. The tokens and provider come with the first one.
```
npx shadcn@latest add @nasaq/button @nasaq/data-table
```
03
Or install the package
```
npm i @fadymondy/nasaq
```

Import the styles into your Tailwind entry

Adjust the @source path to where your node_modules lives.

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

Community

GitHubmaintained

Start with one component.

Read the docs, browse all 347 components in the live catalogue, or star the repo.

npx shadcn@latest add @nasaq/button

Open the docs Star on GitHub