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 として公開されています。コンポーネントは作者自身のプロダクトで日常的に使用されています。各コンポーネントのマニュアルには、安定版、ベータ版、または実験的のステータスが記載されています。安定版の API はセマンティックバージョニングに従い、ベータ版には今後プロパティが追加される可能性があります。

クイックスタート：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

静的ビルドは 1 つのフォルダーにまとまっています。ドキュメント、すべてのストーリー、デモ画像、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 の修正、ドキュメント、新しいコンポーネントなどのコントリビューションを歓迎します。セットアップ、規約、DCO サインオフについては CONTRIBUTING.md を読み、good first issue のラベルが付いた課題をご確認ください。

コミュニティ

• GitHub Discussions：質問、アイデア、作品の共有
• Issues：バグ報告や機能リクエスト
• セキュリティに関する報告：SECURITY.mdをご覧ください

行動規範を遵守してください。

フォント、ロゴ、ブランド

MIT ライセンスの対象はソースコードとドキュメントです。以下の項目は対象外です。

• フォント。 トークンスタックでは、ラテン文字用に Inter、アラビア文字用に IBM Plex Sans Arabic（どちらも SIL OFL）、コード用に JetBrains Mono を指定しています。パッケージにはこれらのフォントは含まれていないため、読み込み方法はご自身で選んでください。ドキュメントサイトでは IBM Plex Sans Arabic（300/400/500）をライセンスとともにapps/lab/public/fontsでセルフホストしています。Nasaq をデプロイする場合、読み込むフォントのライセンスについてはご自身の責任となります。
• ロゴとブランドマーク。 サインインコンポーネント（oauth-buttons、connected-accounts）では、Google、GitHub、Apple、Microsoft の公式マークを改変せず、各プロバイダー固有の色で描画し、それぞれのブランドガイドラインに従っています。これらは各所有者の商標であり、色の変更、反転、描き直しは一切行っていません。また、このリポジトリから利用許諾されるものではありません。ご自身の製品で使用する場合は、各プロバイダーのガイドラインに従ってください。ブランドマニフェスト（packages/brands）には、作者自身の製品のマークと、テーマ設定を実演するためにデータとして描画された17種類のブランドテーマが含まれています。ご自身が所有していない製品に使用しないでください。
• 画像。 ストアフロントのデモでは、表示用にデモ向けに作成したシンプルな SVG イラストをapps/lab/public/storeに使用しています。製品写真のライブラリではありません。

ここに記載されたものが、所有者の許可しない方法で使用されていると思われる場合は、SECURITY.mdからお知らせください。該当するものを削除します。

クレジット

Fady Mondy が制作しました。Base UI、Tailwind CSS、shadcn/ui（レジストリ形式とコンポーネント構造）、Storybook、Style Dictionary、DTCG トークン形式を使用しています。

スポンサー

Nasaq は、Zekra、Mahaam、Moharrik、Hosbah を支えるオープンソースの Go + React フレームワークである ToGOの開発者、Fady Mondyによって制作されています。Nasaq を支援する最善の方法は、エコシステム全体の資金となるToGO のスポンサーになることです。

ToGO のスポンサーになる →

ライセンス

MIT、© 2026 Fady Mondy。LICENSEをご覧ください。