Nasaq UI MCP server

Nasaq (نسق)

One product language for every surface: 354 React components, a token system, eleven brand themes and full page templates, built on Base UI and Tailwind CSS v4, with Arabic and right-to-left layout treated as a first-class case. Install it as a shadcn registry (you own the source) or, once the first release is out, as an npm package.

Status

Version 0.1.0. The components are in daily use in the author's own products, but the API is not frozen: expect changes between 0.x releases. The npm package @fadymondy/nasaq is prepared but not published yet; until it is, use the shadcn registry. Each component's manual carries a status of stable, beta or experimental.

Quick start: shadcn registry

Works in any project that already runs shadcn (components.json present).

# once: the Nasaq preset (tokens, theme, provider)
npx shadcn@latest add https://docs.nasaqui.com/r/nasaq.json

# then any component by URL
npx shadcn@latest add https://docs.nasaqui.com/r/button.json

# a brand theme (11 available, theme-<brand>)
npx shadcn@latest add https://docs.nasaqui.com/r/theme-nasaq.json

To use the short @nasaq/ form, add the namespace to components.json:

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

npx shadcn@latest add @nasaq/button

The registry serves plain JSON with Access-Control-Allow-Origin: *, so it also works from other tools.

Quick start: npm (pending the first release)

pnpm add @fadymondy/nasaq

import { Button, NasaqProvider } from "@fadymondy/nasaq/web";
import "@fadymondy/nasaq/web/styles.css";

Entry points: /web, /web/styles.css, /tokens, /tokens.css, /theme.css, /brands, /native (React Native) and /electron. This section describes the intended package layout; it is not installable until the release is published.

MCP server

Lets Claude, Cursor and other MCP clients search the components and read their manuals.

# hosted (streamable HTTP)
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp

# or local over stdio
claude mcp add nasaq -- npx -y @fadymondy/nasaq-mcp

Tools: getsetup, listcomponents, searchcomponents, getcomponent, getfoundation, listtokens. The setup for Claude, Cursor and other clients is on the docs site under Docs, Guides, MCP server. The stdio package is likewise not on npm until it is released.

Repository layout

apps/
  lab/          Storybook 10: the documentation site and every story; builds the static site and the registry
  site/         Next.js landing/brand site and the older registry builder
packages/
  web/          the React components (@nasaq/web, source of the registry)
  tokens/       DTCG design tokens, generated CSS and typed module
  brands/       brand manifests and marks
  icons/        icon set
  native/       React Native kit
  electron/     Electron window chrome
  feedback/     in-app feedback reporter
  mcp/          the MCP server
  nasaq/        the published package, @fadymondy/nasaq
  tooling/      lint and check tooling
scripts/        registry build and validation, component checks
docs/           architecture notes and design audits

Development

Node 22 or newer and pnpm 11.

pnpm install
pnpm lab                                   # Storybook on http://localhost:6106

Shortened. The full README is on GitHub.