مقدّمة
تقدّم فاصلة مجموعة مكوّنات قابلة لإعادة الاستخدام، تنسخها وتلصقها في تطبيقك. ليست مكتبة مكوّنات تقليدية — الشيفرة لك، تعدّلها كما تشاء.
الميزات
- 27+ مكوّناً — أساسيات وكتل وتأثيرات
- وصولية — مبنية بالوصولية في الحسبان، مع التنقّل بلوحة المفاتيح
- حركة — حركات سلسة عبر Framer Motion، تحترم تقليل الحركة
- TypeScript — أنواع كاملة في كل الشيفرة
- المظهر الداكن — مدعوم جاهزاً
- قابلة للتخصيص — مبنية على Tailwind CSS، سهلة التعديل
فئات المكوّنات
المكوّنات الأساسية
ButtonAdd an accessible React button with visual variants, responsive sizes, loading feedback, and composable child rendering.InputUse a typed React text input with validation states, icon support, accessible focus styles, and Tailwind customization.CardCompose React card layouts from accessible header, title, description, content, and footer building blocks.BadgeDisplay compact React status indicators and labels with reusable badge variants and semantic Tailwind styling.SkeletonCreate accessible React loading placeholders for text, avatars, cards, and custom content layouts with Fasla skeletons.AvatarRepresent users with a React avatar that supports images, fallback content, grouping, and consistent accessible sizing.CheckboxAdd an accessible React checkbox for binary selections with controlled state, labels, and keyboard interaction.SwitchUse an accessible React switch for on-off settings with controlled state, keyboard support, and clear visual feedback.SelectBuild a typed React select control for choosing one option with accessible interaction and customizable styling.TextareaAdd a multi-line React text input with character counting, resize options, validation states, and accessible labels.TabsOrganize related React content into accessible tab lists, triggers, and keyboard-navigable panels.ComboboxCreate a searchable React combobox with single or multiple selection, accessible controls, and typed options.
الكتل
AppShellStructure React applications with a responsive app shell that composes navigation, sidebars, headers, and main content.PageHeaderBuild consistent React page headers with titles, descriptions, breadcrumbs, and responsive action areas.EmptyStateExplain empty React views with contextual icons, helpful descriptions, search variants, and clear next actions.FormSectionGroup related React form fields with headings, descriptions, validation-ready layout, and aligned action controls.DataTablePresent structured React data with typed columns, pagination, responsive controls, and reusable table states.SidebarAdd a responsive React sidebar for application navigation with collapsible structure and accessible links.NavbarCreate a responsive React navigation bar with desktop links, mobile menu behavior, and flexible brand content.Stats CardDisplay key React dashboard metrics with trend indicators, supporting context, icons, and consistent card layout.
التأثيرات
Shimmer ButtonDraw attention to React calls to action with a polished shimmer animation that respects reduced-motion preferences.AnimatedGradientAdd a configurable animated gradient background to React hero sections and cards with smooth motion behavior.TextRevealReveal React text character by character with reusable animation controls and reduced-motion support.BorderBeamHighlight React cards and containers with a configurable animated beam that travels around the border.SpotlightCreate cursor-responsive spotlight backgrounds for React interfaces with controlled glow and positioning.Typewriter TextAnimate React copy with a configurable typewriter sequence for product messages, headings, and demonstrations.Glow CardBuild interactive React cards with pointer-following glow effects, layered content, and adaptable surface styling.