الرئيسية / مفتوح المصدر / slotsmith

slotsmith

مكوّنات React يمكنك تفكيكها.

مكتبة تفصل المنطق عن الواجهة: كل جزء فيها قابل للاستبدال، وما لا تستبدله يُعرض HTML جاهزاً ومتاحاً للجميع. أطلق منتجك من اليوم الأول، وطابق نظام تصميمك في اليوم الأربعين، دون أن تنسخ المكتبة وتعدّلها.

v1.4.0
ISC
React 18 · 19
0 runtime deps
RTL built in

اقرأ التوثيق GitHub npm


Pagination bar	Yousef	منجز
Skeleton state	Noor	مراجعة
Error state	Yousef	منجز
Empty state	Lina	منجز
Sticky header	Omar	مراجعة

مبني بمكوّن DataTable من مكتبتي slotsmith

users-table.tsx

import { DataTable } from "slotsmith"

// It works, and it already looks finished.
<DataTable data={users} columns={columns} />

نوعان من الأجزاء

أجزاء العناصر

Root · Table · Row · Cell …

خصائص DOM عادية، والحالة في سمات data-*. ضع عناصر shadcn أو MUI أو Chakra كما هي.

أجزاء الأدوات

Checkbox · Pagination · Empty …

خصائص دلالية مثل checked وpageIndex. مكوّناتك أنت، عبر محوّل من بضعة أسطر.

Data table

21 parts · TanStack v9

مبني على TanStack Table v9، مع ٢١ جزءاً قابلاً للاستبدال.

ترتيب وتقسيم صفحات على العميل أو الخادم
تحديد يبقى عبر صفحات الخادم
صفوف شجرية وافتراضية ورأس ثابت
حالات التحميل والخطأ والفراغ

جرّبه مباشرة

Autocomplete

17 parts

حقل بحث وقائمة اختيار في مكوّن واحد، مع ١٧ جزءاً قابلاً للاستبدال. وسوم للقيم المتعددة، وخيارات بعيدة مع تأخير وإلغاء وتقسيم صفحات.

جرّبه مباشرة

File uploader

drop zone · tile · picker

منطقة إفلات، أو مربع صورة، أو زر اختيار فقط. رفع بالطابور مع تقدم وإعادة محاولة، وإلغاء حقيقي، ومعاينات فورية.

جرّبه مباشرة

Date picker

13 parts · single · multiple · range

تاريخ واحد، أو عدة تواريخ، أو مدة، مع ١٣ جزءاً قابلاً للاستبدال. تنقّل كامل بلوحة المفاتيح، وحدود وتواريخ محظورة، واختصارات جاهزة، وقيم بصيغة YYYY-MM-DD لا تنزاح مع اختلاف المناطق الزمنية.

جرّبه مباشرة

ووكيلك الذكي يعرفها أيضاً

slotsmith-ai خادم MCP لوكلاء البرمجة مثل Claude Code وCursor وVS Code Copilot. يمنحهم الخصائص والأجزاء وشيفرة البدائل كما هي، ووصفات المحوّلات لـ MUI وshadcn وChakra، مطابقةً لنسخة slotsmith المثبّتة لديك، وينبّهك إن اختلفت النسختان. لا خصائص مخمّنة، ولا أسماء أجزاء مختلقة.

دليل أدوات الذكاء الاصطناعي

Claude Code

claude mcp add slotsmith -- npx -y slotsmith-ai mcp

Cursor · VS Code · Claude Desktop

{"command":"npx","args":["-y","slotsmith-ai","mcp"]}

الأدوات التي يمنحها لوكيلك

list_components
get_component_api
list_slots
get_slot
get_adapter_example
get_setup
search_docs

ما يعد به كل مكوّن

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

لماذا بنيتها

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

هذه مجرد البداية

أربعة مكوّنات اليوم، والمزيد في الطريق: مكوّنات جديدة، ونسخ أفضل من الموجودة، وأفكار تجعل البرمجة اليومية أسهل. والقواعد نفسها للجميع: منطق مستقل عن الواجهة، وأجزاء قابلة للاستبدال، وبدائل جاهزة للإطلاق.

القادم

مكوّنات جديدة مبنية بالطريقة نفسها
تحسينات أعمق على المكوّنات الأربعة الحالية
أدوات وأفكار تختصر التكرار اليومي في البرمجة

تريد هذا المستوى من العناية في منتجك؟

أرسل وصف مشروعك

$ npm i slotsmith