io.github.fadymondyPublished by GitHub account fadymondyv0.3.1Updated Nov 1, 2026
Nasaq design system docs for agents: 390 components for React, Vue, Blade and HTML, with Arabic RTL.
Serves Nasaq design system docs to an assistant: browse 390+ components, search them by need, and read manuals, tokens and setup guides.
Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.
Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.
Read https://sourceweft.com/mcp/io.github.fadymondy%2Fnasaq/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.Add this to your client's mcpServers config.
{
"mcpServers": {
"nasaq-ui": {
"type": "http",
"url": "https://mcp.nasaqui.com/mcp"
}
}
}One product language for every surface: 392 components, design tokens and 17 brand themes, with Arabic and RTL built in.
[CI] [npm] [License: MIT] [GitHub stars] · Read the launch article Docs · Website · Discussions · Contributing
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.
[A whole storefront built from Nasaq components (Pages / Store / Journey)]
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.
Works in any project that already runs shadcn (components.json present).
To use the short @nasaq/<name> form, add the namespace to components.json:
The registry serves plain JSON with Access-Control-Allow-Origin: *, so it also works from other tools.
Entry points: /web, /web/styles.css, /tokens, /tokens.css, /theme.css, /brands, /native (React Native) and /electron.
Lets Claude, Cursor and other MCP clients search the components and read their manuals.
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.
Node 22 or newer and pnpm 11.
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.
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.
Please follow the Code of Conduct.
The MIT licence covers the source code and documentation. It does not cover the items below.
apps/lab/public/fonts with its licence. If you deploy Nasaq you are responsible for the licences of the fonts you load.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.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.
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.
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] [GitHub Sponsors] [Buy Me a Coffee]
MIT, © 2026 Fady Mondy. See LICENSE.
Source: README.md at commit 1dbebee
List Nasaq components
Lists every Nasaq web component with its category, status, one-line summary and exports. Filter by category or a text query. With a non-React `framework`, lists only the components that exist in that stack.
querycategoryframeworkSearch Nasaq components
Ranks components for a need described in words, e.g. 'switch between products', 'empty state', 'keyboard shortcut'.
limitqueryrequiredGet a Nasaq component
Returns one component's details and manual. `name` may be the folder (app-shell), the title (AppShell) or any export (SidebarItem). `include` picks what to return: readme (default, full manual), api (API section only), examples, source (TSX), story (Storybook CSF), all. `framework` returns the component in another stack (html, alpine, vue, blade, livewire, filament, inertia, shadcn, …).
namerequiredincludeframeworkGet a Nasaq foundations doc
Design rules behind the components: colour roles, layout and density, architecture, brand/logo rules, README spec. Omit `topic` to list topics.
topicList Nasaq design tokens
CSS custom properties (--nq-*) with their value in each context (light, dark, brand, density). Filter by prefix, e.g. '--nq-danger' or 'surface'. In Tailwind use them as utilities: bg-nq-surface, text-nq-fg-muted, border-nq-border.
limitprefixHow to install and set up Nasaq
Install command, CSS imports, provider and the usual app skeleton. Call once before building UI. `framework` picks the guide: react (default), shadcn, inertia, html, alpine, vue, or blade/livewire/filament/laravel/tomatophp.
framework100% of the applicable checks met
How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.
# 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{ "registries": { "@nasaq": "https://docs.nasaqui.com/r/{name}.json" }}npx shadcn@latest add @nasaq/buttonpnpm add @fadymondy/nasaqimport { Button, NasaqProvider } from "@fadymondy/nasaq/web";import "@fadymondy/nasaq/web/styles.css";# 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-mcpapps/ 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 auditspnpm 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