UI Blueprints
UI component systems, visual editors, and developer tooling blueprints.
| Blueprint | Description | Version |
|---|---|---|
| Accessibility | WCAG 2.1 AA compliance with keyboard navigation, focus management, ARIA attributes, skip links, screen reader support, contrast enforcement, and reduced motion preferences. | 1.0.0 |
| Accessible Component Library | Accessible, composable UI component library built on accessible component primitives with variant system, Tailwind CSS styling, and a multi-style design system | 1.0.0 |
| Animation State Machine | State machine-based animation control | 1.0.0 |
| Arbitrary Values | Use one-off custom values in utilities without defining them in theme, enabling flexible styling beyond framework constraints | 1.0.0 |
| Button Controls | Clickable buttons and button groups | 1.0.0 |
| Charts Visualization | Chart rendering system with bar, line, pie, donut, area, scatter, time-series, and heatmap types, responsive sizing, tooltips, legends, and real-time updates | 1.0.0 |
| Color System | Define a structured color palette using HSL for better shade control, ensuring sufficient colors for hierarchy while avoiding over-saturation and maintaining accessibility for color-blind users. | 1.0.0 |
| Component Registry | Pluggable component registration system with config-driven fields, slots, lifecycle hooks, and permissions | 1.0.0 |
| Component Registry Cli | CLI tool for initializing projects, adding UI components from registries, managing migrations, and providing MCP server integration for AI assistants | 1.0.0 |
| Container Layouts | Layout containers for UI arrangement | 1.0.0 |
| Dark Mode | Theme toggle supporting light, dark, and system-preference modes with CSS custom properties, user preference persistence, smooth transitions, and flash-of-wrong-theme prevention. | 1.0.0 |
| Dashboard Analytics | Configurable analytics dashboard with widget grid system, KPI cards, charts, date range selection, auto-refresh, and drill-down capabilities | 1.0.0 |
| Data Table | Sortable, filterable, paginated data table with column management, row selection, inline editing, bulk actions, and CSV export | 1.0.0 |
| Depth Elevation | Use shadows, layering, and spatial relationships to create visual depth and communicate elevation, even in flat designs, making clickable elements feel interactive and content hierarchy clear. | 1.0.0 |
| Design Polish | Apply finishing touches that elevate interface quality through accent borders, background decoration, empty states, minimal borders, and small details that compound into a professional appearance. | 1.0.0 |
| Drag Drop Editor | Drag-and-drop page composition system with nested zones, collision detection, and component reordering | 1.0.0 |
| Ecommerce Store | Full online storefront with product catalog, category browsing, attribute filtering, shopping cart, multi-step checkout, payment integration, wishlist, and pricelist support. | 1.0.0 |
| Feature First Design | Start design with core features and user workflows before deciding on app shell or navigation. This prevents design paralysis and ensures information architecture is driven by real requirements. | 1.0.0 |
| Fleet Performance Dashboard | Configurable dashboards with widgets showing fleet KPIs, live driver map, order metrics, and performance analytics | 1.0.0 |
| Form Builder | Dynamic form creation and rendering with drag-and-drop field placement, conditional visibility, multi-step forms, validation rules, and versioning | 1.0.0 |
| Form Design | Design forms that are easy to scan and complete by organizing fields clearly, providing immediate feedback, handling errors gracefully, and minimizing cognitive load through smart defaults. | 1.0.0 |
| Fuel Analytics | Analyse fuel consumption, cost trends, and efficiency metrics across the fleet or per vehicle with configurable grouping periods, anomaly detection, and benchmark comparisons. | 1.0.0 |
| Internationalization | Internationalization with locale switching, translation keys, pluralization, and RTL support | 1.0.0 |
| Keyframe Animation | Timeline-based keyframe animation and playback | 1.0.0 |
| Location History Map Visualization | Interactive map rendering GPS history as points, connected routes (optionally speed-coloured), and a density heatmap with layer toggles and point-position correction. | 1.0.0 |
| Navigation Menu | Hierarchical navigation with sidebar, breadcrumb, mega menu, and mobile support | 1.0.0 |
| Node Process Callbacks | Per-frame update callbacks and physics processing | 1.0.0 |
| Node Signals | Signal emission and connection for event-driven programming | 1.0.0 |
| Responsive Layout | Design responsive layouts using breakpoint variants to apply different styles at different screen sizes | 1.0.0 |
| Responsive Viewport | Multi-viewport responsive preview with auto-zoom, manual zoom controls, and iframe-based isolated rendering | 1.0.0 |
| Scene Tree Management | Hierarchical scene graph and node management | 1.0.0 |
| Self Order Kiosk | Customer self-ordering system supporting kiosk terminals and mobile QR-code ordering, with menu browsing, cart management, payment processing, and real-time order status updates. | 1.0.0 |
| Spacing System | Define a consistent spacing and sizing scale using mathematical ratios so components are visually balanced, grouping is clear, and whitespace reinforces information hierarchy. | 1.0.0 |
| Text Input | Text entry fields and text editing | 1.0.0 |
| Theme Configuration | Define and customize design tokens (colors, spacing, typography, breakpoints) that power a CSS framework | 1.0.0 |
| Toast Notifications | Transient toast/snackbar notifications with auto-dismiss, stacking, and accessibility | 1.0.0 |
| Trip Stay Timeline | Chronological feed of day-grouped journeys and place stays with single-expand accordion, companion map synchronisation, and hover highlighting. | 1.0.0 |
| Typography System | Define a consistent type scale, font selection, and readability rules that establish clear visual hierarchy and ensure text is readable across all interface sizes and contexts. | 1.0.0 |
| Utility Composition | Build user interfaces by composing utility classes with variants and modifiers to generate CSS rules | 1.0.0 |
| Visual Hierarchy | Establish clear visual hierarchy through size, weight, color, and spacing so users can quickly scan and understand interface priority without cognitive overload. | 1.0.0 |
| Wizard Stepper | Multi-step form and process wizard with progress indicator, step validation, skip optional steps, save progress, and resume later | 1.0.0 |