نسق

نظام تصميم · React 19 · Base UI · Tailwind v4

نسق

لغة منتج واحدة لكل واجهة: ٣٤٧ مكوّنًا وقوالب صفحات كاملة فوق طبقة رموز تصميم، بالإنجليزية والعربية ودعم حقيقي لاتجاه اليمين لليسار. انسخها إلى مشروعك عبر shadcn أو ثبّت حزمة واحدة، ودع وكيل الذكاء الاصطناعي لديك يقرأ كل دليل عبر MCP.

نسق · الفهرس٣٤٧ مكوّنًا
  • التجارةpos-register · catalog-store · checkout-steps
    ٣٧
  • التحليلاتfunnel-chart · web-vitals-page · keyword-tracker
    ٢٧
  • المطوّرapi-keys · deploy-view · feature-flags
    ٢٦
  • النماذجform-builder · phone-input · currency-input
    ٢٥
  • الذكاء الاصطناعيcopilot-chat · agent-steps · ai-citations
    ١٦
  • و١٨ فئة أخرىapp-shell · data-table · dashboard-board · docs-shell
    ٢١٦
npm i @fadymondy/nasaq
افتح التوثيقالمستودع على GitHub

  • ٣٤٧

    مكوّنًا، لكل منها دليل

  • ٢٣

    فئة

  • ١٠

    سمات هوية

  • EN · AR

    مع دعم حقيقي لـ RTL

  • React 19 · Base UI · Tailwind v4
  • ٣٤٧ مكوّنًا
  • إنجليزي وعربي، ودعم حقيقي لـ RTL
  • خادم MCP لوكلاء الذكاء
  • رخصة MIT

المزايا

طبقة رموز تصميم، لا ملف سمة

الألوان والخطوط والمسافات والكثافة والتعبير كلها متغيّرات CSS بالبادئة --nq-*، للوضعين الفاتح والداكن. غيّر رمزًا واحدًا فتتبعه كل المكوّنات.

٣٤٧ مكوّنًا على Base UI

مبنية على عناصر Base UI غير المنسّقة ومنسّقة بـ Tailwind v4. من الأزرار وجداول البيانات إلى منشئات النماذج والقواعد ومستكشفات الملفات.

صفحات كاملة، لا أزرار فقط

قوالب على مستوى الصفحة تبدأ منها: لوحات معلومات ومناطق إدارة وواجهات محادثة ووكلاء ذكاء، وحزمة تجارة، ونقطة بيع، وحضور موارد بشرية، وهيكل توثيق، وأقسام تسويقية.

العربية واليمين لليسار فعلًا

تحمل المكوّنات نصوصًا بالإنجليزية والعربية وتتخطّط من اليمين إلى اليسار، مع أيقونات تتبع الاتجاه. أما شعار الهوية فلا يُعكس أبدًا.

سمات هوية

عشر سمات جاهزة: نسق وFady Mondy ومهام وذكرى ومحرّك وSeatFor وHealth Debug وCircleXO وحوسبة وOrchestra. اختر واحدة عبر الخاصية brand في NasaqProvider.

مصمَّم ليقرأه وكلاء الذكاء

يأتي كل مكوّن مع دليل README فيه الخصائص والأمثلة وملاحظات الوصول والاتجاه. وخادم MCP يمرّر هذه الأدلة إلى Claude Code وCursor وأي عميل MCP.

أول شاشة

غلّف التطبيق بـ NasaqProvider. هو من يدير السمة والهوية والكثافة والاتجاه، ويتحوّل إلى RTL حين تكون اللغة عربية.

npm packageapp.tsx
tsx
import { Button, NasaqProvider } from "@fadymondy/nasaq/web"

export function App() {
  return (
    <NasaqProvider brand="nasaq" defaultLocale="ar">
      <Button>Save</Button>
    </NasaqProvider>
  )
}
shadcn (copied in)app.tsx
tsx
import { Button } from "@/components/ui/button"

export function App() {
  return <Button>Save</Button>
}

حزمة واحدة، ثلاث واجهات

تصدر @fadymondy/nasaq بمسار فرعي لكل واجهة. مستودع shadcn يغطي مكوّنات الويب، أما حزمة الجوال ومساعدات Electron فمن npm فقط.

Web

@fadymondy/nasaq/web

مكوّنات React 19 وقوالبها، مع الرموز والسمات وشعارات الهوية.

React Native

@fadymondy/nasaq/native

حزمة الجوال بالرموز نفسها ومعالجة اتجاه RTL.

Electron

@fadymondy/nasaq/electron

إطار النوافذ ومساعدات العملية الرئيسية لتطبيقات سطح المكتب.

امنح وكيل الذكاء الأدلة

ست أدوات: get_setup وlist_components وsearch_components وget_component وget_foundation وlist_tokens. يجد الوكيل المكوّن المناسب ويقرأ طريقة استخدامه، بما فيها قواعد RTL.

Hosted (HTTP)

لا شيء لتثبيته. أضفه إلى Claude Code بأمر واحد.

claude mcp add --transport http nasaq https://nasaq-mcp.fadymondy.com/mcp

Local (stdio)

يعمل على جهازك من حزمة npm، ولا يحتاج رموز وصول ولا اتصالًا بالشبكة.

claude mcp add nasaq -- npx -y @fadymondy/nasaq-mcp

البداية

طريقان للبدء: انسخ المكوّنات إلى تطبيقك عبر shadcn CLI، أو ثبّت الحزمة. كلاهما يستغرق أقل من دقيقة.

  1. 01

    shadcn: وجّه الأداة إلى مستودع نسق

    أضف النطاق @nasaq إلى registries في components.json.

    "registries": {
  "@nasaq": "https://nasaq-ui.fadymondy.com/r/{name}.json"
}
  2. 02

    shadcn: أضف المكوّنات

    يصل الكود المصدري إلى تطبيقك وتعدّله كما تشاء. وتأتي الرموز والمزوّد مع أول مكوّن.

    npx shadcn@latest add @nasaq/button @nasaq/data-table
  3. 03

    أو ثبّت الحزمة

    npm i @fadymondy/nasaq
  4. 04

    استورد الأنماط في ملف Tailwind

    عدّل مسار @source ليطابق موضع node_modules عندك.

    @import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
@source "../node_modules/@fadymondy/nasaq/dist/web";

أسئلة

المستودع أم حزمة npm: أيهما أختار؟

استخدم مستودع shadcn إذا أردت الكود في تطبيقك لتعدّله. واستخدم @fadymondy/nasaq إذا أردت اعتمادًا بإصدار محدّد أو حزمة الجوال أو مساعدات Electron. كلاهما مولَّد من المصدر نفسه فلا يختلفان.

ما مدى نضجه؟

هذا الإصدار 0.1.0. من بين ٣٤٧ مكوّنًا، ٤٩ موسومة مستقرة و٢٩٨ تجريبية، فتوقّع تغيّر الواجهات قبل الإصدار 1.0.

هل يعمل دون العربية؟

نعم. الإنجليزية هي الافتراضية، ولا يُطبَّق اتجاه RTL إلا حين تكون اللغة عربية.

ما الرخصة؟

MIT، ومفتوح المصدر على github.com/fadymondy/nasaq.

المجتمع

GitHubمُصان

ابدأ بمكوّن واحد.

اقرأ التوثيق، وتصفّح المكوّنات الـ٣٤٧ في الفهرس الحي، أو ضع نجمة على المستودع.

npx shadcn@latest add @nasaq/button
افتح التوثيقضع نجمة على GitHub