Nasaq UI

让每个界面都使用统一的产品语言：392 个 React 组件、一套令牌系统、17 个品牌主题和完整的页面模板，基于 Base UI 和 Tailwind CSS v4 构建，并将阿拉伯语和从右向左布局视为一等需求。可将其作为 shadcn 注册表安装（源码由你掌控），也可安装 npm 包 @fadymondy/nasaq。

文档和在线组件	https://docs.nasaqui.com
shadcn 注册表	https://docs.nasaqui.com/r/{name}.json（索引：`/registry.json`）
MCP 服务（供 AI 工具使用）	https://mcp.nasaqui.com/mcp
落地页	https://nasaqui.com

状态

版本 1.4.0，已在 npm 上发布，包名为 @fadymondy/nasaq。作者自己的产品每天都在使用这些组件。每个组件的使用手册都标注了稳定版、Beta 版或实验版状态：稳定版 API 遵循 semver，Beta 版仍可能增加属性。

快速开始：shadcn 注册表

适用于任何已运行 shadcn 的项目（存在 components.json）。

# 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

若要使用简写形式 @nasaq/<name>，请将命名空间添加到 components.json：

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

npx shadcn@latest add @nasaq/button

注册表提供带有 Access-Control-Allow-Origin: * 的纯 JSON，因此也适用于其他工具。

快速开始：npm

pnpm add @fadymondy/nasaq

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

入口点：/web、/web/styles.css、/tokens、/tokens.css、/theme.css、/brands、/native（React Native）和 /electron。

MCP 服务

允许 Claude、Cursor 和其他 MCP 客户端搜索组件并阅读其使用手册。

# 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

工具：get_setup、list_components、search_components、get_component、get_foundation、list_tokens。Claude、Cursor 和其他客户端的配置说明位于文档网站的 Docs、Guides、MCP server 页面中。stdio 包同样尚未发布，因此还未上架 npm。

仓库结构

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

开发

需要 Node 22 或更高版本以及 pnpm 11。

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

pnpm typecheck
pnpm lint                                  # logical properties only, no raw hex colours
pnpm test                                  # includes the token contrast matrix
pnpm check:components                      # every component has a valid README and a story

pnpm --filter @nasaq/site registry         # build and validate the shadcn registry
pnpm --filter @nasaq/lab build             # static docs + registry -> apps/lab/storybook-static
pnpm --filter @nasaq/lab serve             # serve that folder on http://127.0.0.1:6108

静态构建产物集中在一个文件夹中：文档、所有 story、演示图片、r/*.json 和 registry.json。apps/lab/scripts/serve-static.mjs 是一个无需依赖的静态服务器（为每条路径设置缓存标头，并为注册表文件启用 CORS）；托管说明请参阅 docs/ARCHITECTURE.md。要将其作为长期运行的服务启动：node apps/lab/scripts/serve-static.mjs --port 6108 --host 0.0.0.0。

参与贡献

欢迎贡献：缺陷报告、无障碍和 RTL 修复、文档及新组件。请阅读 CONTRIBUTING.md 了解环境设置、约定和 DCO 签署要求，然后查找 good first issue。

社区

• GitHub 讨论区：提问、交流想法、展示成果
• 问题反馈：错误和功能请求
• 安全问题报告：请参阅 SECURITY.md

请遵守行为准则。

字体、徽标和品牌

MIT 许可证适用于源代码和文档，不适用于以下内容。

• 字体。 令牌字体栈指定了 Inter（拉丁文）和 IBM Plex Sans Arabic（阿拉伯文），两者均采用 SIL OFL 许可证，代码字体为 JetBrains Mono。这些软件包不会加载其中任何字体，因此由你自行选择如何加载；文档站点会从 apps/lab/public/fonts 自托管 IBM Plex Sans Arabic（300/400/500）及其许可证。如果你部署 Nasaq，则需要自行负责所加载字体的许可证。
• 徽标和品牌标识。 登录组件（oauth-buttons、connected-accounts）会绘制官方 Google、GitHub、Apple 和 Microsoft 标识，不作修改，并采用各提供商指定的颜色，遵循其品牌指南。这些标识是其所有者的商标，本仓库不会向你授予相关许可；不得重新着色、镜像或重绘。请在你自己的产品中遵循各提供商的指南。品牌清单（packages/brands）包含作者自有产品的标识和 17 个品牌主题，并以数据形式绘制以展示主题配置；请勿将其用于你不拥有的产品。
• 图片。 商店演示使用 apps/lab/public/store 下的简单 SVG 插图，这些插图专为演示绘制，仅用于正常显示，并非产品照片库。

如果你认为这里有内容的使用方式不符合其所有者的许可要求，请通过 SECURITY.md 告知我们，我们会将其移除。

致谢

由 Fady Mondy 构建。使用了 Base UI、Tailwind CSS、shadcn/ui（注册表格式和组件结构）、Storybook、Style Dictionary 和 DTCG token format。

赞助

Nasaq 由 Fady Mondy 制作，他也是 ToGO 的创建者。这是一个开源 Go + React 框架，也是 Zekra、Mahaam、 Moharrik 和 Hosbah 背后的框架。支持 Nasaq 的最佳方式是赞助 ToGO，为整个生态系统提供资金。

赞助 ToGO →

许可证

MIT，© 2026 Fady Mondy。请参阅 LICENSE。