@vibe-labs/design-vue

Umbrella package for the Vibe Design System Vue component library. Re-exports every component, composable, type, and constant from all individual packages.

Installation

// Convenience — import everything from one place
import { VibeButton, VibeModal, VibeTable, toast, useUploadQueue } from "@vibe-labs/design-vue";

// Or import from individual packages for explicit tree-shaking
import { VibeButton } from "@vibe-labs/design-vue-buttons";
import { VibeTable, useTableSort } from "@vibe-labs/design-vue-tables";

When to Use This Package

Use the umbrella when you want convenience and are already pulling in most of the design system — the rollup externals mean there's zero runtime overhead, it's just re-exports.

Use individual packages when you want explicit control over your dependency graph, or when only a few components are needed in a lightweight context.

Included Packages

Package	Components	Composables
design-vue-avatars	VibeAvatar, VibeAvatarGroup	getInitials
design-vue-badges	VibeBadge, VibeBadgeCount, VibeDot	—
design-vue-buttons	VibeButton, VibeButtonGroup	—
design-vue-cards	VibeCard, VibeCardHeader, VibeCardBody, VibeCardFooter, VibeCardMedia	—
design-vue-dropdowns	VibeDropdown, VibeDropdownTrigger, VibeDropdownMenu, VibeDropdownItem, VibeDropdownGroup, VibeDropdownDivider	useClickOutside, useDropdownKeyboard
design-vue-forms	VibeForm	useVibeForm, useFormField, createFormValidator, toFormData, dirtyValues + rule builders
design-vue-graphs	VibeGraphBar, VibeGraphLine, VibeGraphPie, VibeGraphSparkline, VibeGraphLegend, VibeGraphTooltip, VibeGraphEmpty	useSeriesColors, useGraphDimensions, useTooltip
design-vue-images	VibeImage, VibeBgImage, VibePicture	useImageLoad, useLazyLoad, useImageQueue, useRadius
design-vue-inputs	VibeInput, VibeInputNumber, VibeInputGroup, VibeTextArea, VibeCheckbox, VibeCheckboxGroup, VibeRadio, VibeRadioGroup	useInputField, useAutoResize
design-vue-lists	VibeList, VibeListItem, VibeListGroup, VibeListDivider, VibeListEmpty	—
design-vue-menus	VibeMenu, VibeMenuItem, VibeMenuGroup, VibeMenuDivider, VibeMenuFlyout	useMenuKeyboard
design-vue-modals	VibeModal, VibeModalHeader, VibeModalBody, VibeModalFooter	useModal, useFocusTrap, useScrollLock
design-vue-pagination	VibePagination	usePagination
design-vue-progress	VibeProgressBar, VibeProgressRing	useProgress, useProgressTimer
design-vue-responsive	VibeResponsiveContainer, VibeResponsiveGrid, VibeResponsiveStack	useContainerBreakpoint
design-vue-sliders	VibeSlider	useSliderDrag
design-vue-spinners	VibeSpinner, VibeSpinnerOverlay, VibeSkeleton	—
design-vue-tabs	VibeTabs, VibeTabList, VibeTab, VibeTabPanels, VibeTabPanel	—
design-vue-tables	VibeTable	useTableSort, useTableSelection
design-vue-toasts	VibeToast, VibeToastContainer	toast (imperative API), useToast
design-vue-toggles	VibeToggle	—
design-vue-uploads	VibeUploadZone, VibeUploadList, VibeUploadItem, VibeUploadIndicator	useUploadQueue

CSS

This package does not bundle CSS. You still need to import the design system's CSS layer separately — either the full @vibe-labs/design-components bundle or individual component CSS packages.

Build

npm run build

Built with Vite + vite-plugin-dts. All @vibe-labs/* dependencies are externalized — this package produces a thin re-export module with no bundled component code.

Documentation

Each individual package has its own comprehensive README with usage examples, props tables, and API documentation. See the individual package READMEs for details.