Nasaq UI

One product language for every surface: 392 React components, a token system, 17 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 as the npm package @fadymondy/nasaq.

[Introduction page, light]

[Component catalogue, dark]

[A whole storefront built from Nasaq components (Pages / Store / Journey)]

Status

Version 1.4.0, published on npm as @fadymondy/nasaq. The components are in daily use in the author's own products. Each component's manual carries a status of stable, beta or experimental: stable APIs follow semver, beta ones may still gain props.

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 URLnpx 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/<name> 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

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.

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 stdioclaude mcp add nasaq -- npx -y @fadymondy/nasaq-mcp

Tools: get_setup, list_components, search_components, get_component, get_foundation, list_tokens. 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 builderpackages/  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 toolingscripts/        registry build and validation, component checksdocs/           architecture notes and design audits

Development

Node 22 or newer and pnpm 11.

pnpm installpnpm lab                                   # Storybook on http://localhost:6106
pnpm typecheckpnpm lint                                  # logical properties only, no raw hex colourspnpm test                                  # includes the token contrast matrixpnpm check:components                      # every component has a valid README and a story
pnpm --filter @nasaq/site registry         # build and validate the shadcn registrypnpm --filter @nasaq/lab build             # static docs + registry -> apps/lab/storybook-staticpnpm --filter @nasaq/lab serve             # serve that folder on http://127.0.0.1:6108

The static build is one folder: the docs, every story, the demo images, r/*.json and registry.json. apps/lab/scripts/serve-static.mjs is a dependency-free server for it (per-path cache headers and CORS for the registry files); see docs/ARCHITECTURE.md for the hosting notes. To run it as a long-lived service: node apps/lab/scripts/serve-static.mjs --port 6108 --host 0.0.0.0.

Contributing

Contributions are welcome: bug reports, accessibility and RTL fixes, docs and new components. Read CONTRIBUTING.md for setup, conventions and the DCO sign-off, then look for good first issue.

Community

• GitHub Discussions: questions, ideas, show and tell
• Issues: bugs and feature requests
• Security reports: see SECURITY.md

Please follow the Code of Conduct.

Fonts, logos and brands

The MIT licence covers the source code and documentation. It does not cover the items below.

• Fonts. The token stacks name Inter (Latin) and IBM Plex Sans Arabic (Arabic), both SIL OFL, plus JetBrains Mono for code. The packages load none of them, so you choose how; the docs site self-hosts IBM Plex Sans Arabic (300/400/500) in apps/lab/public/fonts with its licence. If you deploy Nasaq you are responsible for the licences of the fonts you load.
• Logos and brand marks. The sign-in components (oauth-buttons, connected-accounts) draw the official Google, GitHub, Apple and Microsoft marks, unmodified, in the providers' own colours, following each provider's branding guidelines. They are trademarks of their owners, are never recoloured, mirrored or redrawn, and are not licensed to you by this repository: follow each provider's guidelines in your own product. The brand manifests (packages/brands) hold the marks of the author's own products and the 17 brand themes, drawn as data to demonstrate theming; do not use one for a product you do not own.
• Images. The storefront demos use simple SVG illustrations under apps/lab/public/store, drawn for the demos so they render. They are not a product-photo library.

If you believe something here is used in a way its owner does not allow, please tell us through SECURITY.md and it will be removed.

Credits

Built by Fady Mondy. Made with Base UI, Tailwind CSS, shadcn/ui (registry format and component anatomy), Storybook, Style Dictionary and the DTCG token format.

Sponsor

Nasaq is made by Fady Mondy, the creator of ToGO, the open-source Go + React framework behind Zekra, Mahaam, Moharrik and Hosbah. The best way to support Nasaq is to sponsor ToGO, which funds the whole ecosystem.

Sponsor ToGO →

[Sponsor ToGO] [GitHub Sponsors] [Buy Me a Coffee]

Licence

MIT, © 2026 Fady Mondy. See LICENSE.