UI Building Blocks
Layered component architecture, design system tokens, and dark mode theming.
VibeKit provides a cohesive, accessible design system built on modern React, Radix UI primitives, and Tailwind CSS. Instead of hunting for disjointed UI libraries or pasting messy CSS across your codebase, you build screens rapidly using a structured, three-tier component architecture.
Clean Three-Tier Component Architecture
VibeKit organizes UI code into strict ownership layers to keep your codebase clean and maintainable as your SaaS grows:
| Layer | Directory | Purpose and Examples |
|---|---|---|
| Primitives | apps/web/ui | Low-level atomic building blocks: Button, Dialog, Input, Select, DropdownMenu, Table, Badge, and Avatar. |
| Compositions | apps/web/compositions | Reusable application patterns: PageHeader, EmptyState, DataTable, FilterBar, MediaCard, and Timeline. |
| Feature Screens | apps/web/features/feature-name | Product-specific workflows and business views (e.g., billing tables, settings forms, project dashboards). |
By separating low-level primitives from business features, you can restyle your entire application or update accessibility rules in one place without breaking individual product pages.
Centralized Theme Tokens and Dark Mode
Design consistency across light and dark modes is handled automatically:
- Design Tokens in
DESIGN.md: Color palettes, border radiuses, typography scales, and surface elevations are governed by centralized CSS variables inapps/web/app/globals.css. - Flawless Dark Mode: Powered by
next-themes, dark and light modes switch instantly without flash of unstyled content (FOUC) or hydration mismatches. - Harmonious Palettes: Colors use calibrated HSL tokens for backgrounds, cards, borders, muted text, and primary accents, ensuring strong contrast in all lighting environments.
Dedicated High-Converting Marketing Blocks
Landing pages require distinct visual excitement that differs from dense application dashboards. VibeKit includes a specialized marketing layer under apps/web/marketing:
- Hero Section Windows: Sleek browser frames and interactive product demo canvases.
- Logo and Partner Marquees: Animated infinite-scroll brand showcases.
- Interactive Pricing Tables: Feature comparison matrices with monthly/annual toggle switches.
- Social Proof Carousels: Customer testimonials, trust badges, and conversion-focused call-to-action (CTA) sections.
Accessible and Responsive Primitives
Every primitive component is built with accessibility and mobile responsiveness as first-class requirements:
- Keyboard Navigation: Full keyboard navigation support (Tab, Escape, Enter, Arrow keys) on all dialogs, dropdowns, and interactive modals.
- Screen Reader Friendly: Proper ARIA roles, states, and focus trapping built into every interactive overlay.
- Mobile Adaptive: Tables scroll gracefully on mobile viewports, sidebars collapse into touch-friendly drawer menus, and dialogs resize seamlessly across screen sizes.
Directing Your Agent to Construct New Screens
Instruct your coding agent to compose new screens using VibeKit's existing component hierarchy:
Create a new feature screen for managing API keys in 'apps/web/features/api-keys'.
Use 'PageHeader' from 'apps/web/compositions/PageHeader' for the title and action button.
Use 'DataTable' from 'apps/web/compositions/DataTable' to display the keys, created dates, and last-used timestamps.
Use 'apps/web/ui/Dialog' for the 'Create New Key' modal.
Ensure all form inputs use primitives from 'apps/web/ui' and support both light and dark mode.