Components and Patterns

Components & UX Patterns Registry

Qahera UI Kit features 49 canonical components and 21 higher-order UX patterns engineered with 100% semantic vocabulary parity across 5 framework renderers.

---

1. The 49 Canonical Components

Actions & Navigation

• Button: Primary, secondary, outline, ghost, destructive with loading state.
• Navbar: Responsive navigation bar with brand slot and mobile flyout.
• Sidebar: Collapsible application navigation drawer.
• Tabs: Tabbed interface with keyboard arrow navigation.
• Dropdown: Context menu with trigger and semantic options.
• Breadcrumb: Accessible hierarchical navigation path.
• Pagination: Numbered pagination controls.
• BackToTop: Scroll-triggered returning button.

Containers & Structure

• Card: Elevated, bordered, and vitrine archival containers.
• Modal: Dialog overlay with focus trap and escape dismiss.
• Drawer: Slide-over lateral container.
• Accordion: Collapsible section matrix with animated disclose.
• Table: Structured data matrix with striped and hover variants.
• Hero: Cinematic asymmetrical canvas hero section.
• Container: Responsive logical layout wrapper.
• Grid: CSS grid layout container.
• Divider: Semantic visual separator.

Form & Input Controls

• Input: Text input with error, hint, and leading/trailing icon slots.
• Textarea: Multi-line text field.
• Select: Native and custom dropdown select.
• Checkbox: Accessible toggle checkbox.
• Radio: Radio button group.
• Switch: Binary toggle switch.
• FileUpload: Drag-and-drop file upload zone.
• Rating: Star rating interactive control.
• Slider: Range selection slider.

Feedback & Status

• Alert: Informative, success, warning, and danger message boxes.
• Badge: Status tags and pill indicators.
• Toast: Ephemeral floating notification toasts.
• Tooltip: Hover/focus popup description.
• Progress: Linear progress bar with percentage indicator.
• Spinner: Accessible loading indicator.
• Preloader: Full-screen initial hydration loader.
• Skeleton: Content placeholder shimmer pulse.

Data Display & Media

• Avatar: User profile images and initials.
• Icon: Semantic 24x24 SVG icons (47 canonical icons).
• Treeview: Hierarchical folder tree with expand/collapse.
• Stat: Key performance indicator and metric card.
• KpiCard: Financial KPI card with sparklines and delta badges.
• Timeline: Chronological event sequence tracker.
• Carousel: Touch-enabled image and content slider.
• CanvasSparks: Ambient interactive particle canvas.

---

2. The 21 Compositional UX Patterns

Higher-order UX patterns composed exclusively from canonical primitives:

1. DashboardStat: Multi-metric telemetry card with trend indicators.
2. AuthCard: Login and registration container with validation.
3. DataTable: Advanced table with search, sorting, and pagination.
4. EmptyState: Actionable placeholder for zero-data views.
5. FilterBar: Faceted filtering controls for catalogs.
6. HeaderAction: Page header with title, breadcrumbs, and CTAs.
7. MediaGallery: Grid vitrine for multimedia assets.
8. NotificationCenter: Flyout drawer for system events.
9. OrderSummary: E-commerce checkout pricing breakdown.
10. ProfileHeader: User biography, banner, and quick actions.
11. ReviewCard: Customer testimonials and rating metrics.
12. SettingsSection: Form layout for account and system preferences.
13. StepWizard: Multi-step form progression pipeline.
14. TeamGrid: Member showcase with social channels and roles.
15. PricingTable: Tiered subscription comparison matrix.
16. SearchModal: Quick-command palette (Cmd+K).
17. ConfirmDialog: Actionable modal for destructive operations.
18. ErrorState: Friendly 404/500 recovery screens.
19. ActivityFeed: Auditable log of chronological user events.
20. CookieConsent: Accessible privacy compliance banner.
21. Questionnaire: Multi-question assessment survey card.