vuetifyjs / 0

@vuetify/v0 Headless Vue 3 UI primitives and composables for building modern applications and design systems. is the foundation of the Vuetify ecosystem, offering lightweight, unstyled building blocks with full TypeScript support and accessibility features built-in. > **Note:** This package is in early development (pre-1.0). APIs may change between minor versions. Repository Structure This is a **pnpm monorepo** containing: | Package | Description | |---------|-------------| | | Core headless components and composables | | | Styling and layout primitives | | | Documentation site (0.vuetifyjs.com) | | | Interactive development environment | Requirements • **Node.js** >= 22 • **pnpm** >= 10.6 • **Vue** >= 3.5.0 Installation Exports The package provides tree-shakeable subpath exports: What's Included Components | Component | Description | |-----------|-------------| | **Atom** | Polymorphic base element. Renders as any HTML element via prop with renderless mode support | | **Avatar** | Image with fallback display. Compound component with Root, Image, and Fallback sub-components | | **Breadcrumbs** | Responsive navigation trail with overflow support. Root, List, Item, Link, Page, Divider, Ellipsis sub-components | | **Checkbox** | Standalone or group checkbox with tri-state. Root, Group, SelectAll, Indicator, HiddenInput sub-components | | **Dialog** | Modal dialog using native . Root, Activator, Content, Title, Description, Close sub-components | | **ExpansionPanel** | Accordion/collapsible panels. Supports single (accordion) or multi-expand modes | | **Group** | Multi-selection with tri-state support. Provides , , | | **Pagination** | Page navigation with ellipsis. Root, Item, First, Prev, Next, Last, Ellipsis, Status sub-components | | **Popover** | CSS anchor-positioned popup. Root, Anchor, and Content sub-components | | **Radio** | Radio button group with single-selection. Group, Root, Indicator, HiddenInput sub-components | | **Scrim** | Backdrop/scrim overlay for overlay systems | | **Selection** | Generic single/multi-selection. Configurable via prop | | **Single** | Single-selection specialization of Selection | | **Step** | Navigation/stepper with first, last, next, prev controls | | **Tabs** | Accessible tab interface. Root, List, Item, Panel sub-components | Composables Foundation Core factories that provide the foundation for all other composables: • ** ** - Type-safe Vue dependency injection wrapper • ** ** - Vue plugin factory with context provision • ** ** - Context triple pattern: Registration Base data structures that most other composables build upon: • ** ** - Enhanced Map with indexing, caching, and event support • ** ** - FIFO queue with timeout management (notifications/toasts) • ** ** - Bounded undo/redo history • ** ** - Design token registry with alias resolution • ** ** - Data table with sort, filter, pagination, row selection, grouping, and adapter pattern Selection Selection management composables built on : • ** ** - Base selection with Set-based tracking • ** ** - Multi-selection with tri-state/mixed support • ** ** - Single-selection specialization • ** ** - Navigation through items (first, last, next, prev) • ** ** - Breadcrumb navigation model with depth tracking, truncation, and path traversal • ** ** - Hierarchical tree management with parent-child relationships and open state Forms • ** ** - Form validation and state management with async rules Reactivity • ** ** - Bridge selection context to component v-model • ** ** - Convert registry Map to reactive object Utilities • ** ** - Reactive array filtering with multiple modes • ** ** - Lightweight page navigation (non-registry based) • ** ** - Virtual scrolling for large lists • ** ** - Container overflow measurement for item capacity Transformers • ** ** - Array transformation utilities • ** ** - Reactive object conversion System • ** ** - Click outside detection with cleanup • ** ** - Lifecycle-managed event listeners • ** ** - Hotkey combinations and sequences • ** ** - Intersection observer with auto-cleanup • ** ** - Deferred content rendering for dialogs, menus, and tooltips • ** ** - Reactive CSS media query matching • ** ** - DOM mutation observation • ** ** - Resize observer utilities • ** ** - Conditional effect scope management Plugins Plugin-capable composables following the trinity pattern: • ** ** - Responsive breakpoint detection • ** ** - Date manipulation with adapter pattern and locale sync • ** ** - Feature flags with variations • ** ** - SSR hydration helpers • ** ** - Internationalization with message interpolation • ** ** - Logging adapter (consola/pino/custom) • ** ** - RBAC/ABAC permission system • ** ** - Overlay z-index stacking with automatic scrim coordination • ** ** - Storage adapter (localStorage/sessionStorage/memory) • ** ** - Theme management with CSS variable injection Design Principles • **Headless First**: Components provide logic and accessibility without imposed styling • **Slot-Driven**: Maximum flexibility through comprehensive slot APIs • **CSS Variables**: All styling configurable via custom properties • **TypeScript Native**: Full type safety with generics for extensibility • **Minimal Dependencies**: Only Vue 3.5+ required (markdown libraries optional) • **Composable Architecture**: Reusable logic through Vue 3 composables Documentation For detailed API documentation, examples, and guides, visit 0.vuetifyjs.com. Development Contributing We are not currently accepting external contributions. Check back later or join our Discord community for updates. License MIT License --- Built with care for the Vue ecosystem. Part of the Vuetify family.