@vibe-labs/design-components

Umbrella package for all Vibe Design System component styles and types. Single import for every component.

Usage

@import "@vibe-labs/design-components";

import type { ButtonStyleProps, CardStyleProps, TableStyleProps } from "@vibe-labs/design-components/types";
import { ButtonSizes, CardVariants, TableSizes } from "@vibe-labs/design-components/types";

What's Included

All @vibe-labs/design-components-* packages are re-exported (CSS and types):

Package	Components
components-core	Field wrapper, close button
components-avatars	Avatar, avatar group, status indicator
components-badges	Badge, badge group
components-buttons	Button, button group
components-cards	Card, card sections, media
components-dropdowns	Dropdown menu, items, groups
components-graphs	Chart tokens, series, axes, tooltip, legend
components-images	Image types (CSS reserved)
components-inputs	Text input, textarea, checkbox, radio
components-lists	List, items, groups, dividers, drag/reorder
components-menus	Navigation menus, nested, flyout, compact
components-modals	Modal, drawer, backdrop
components-pagination	Pagination, ellipsis
components-progress	Linear + radial progress
components-responsive	Responsive container, grid, stack
components-sliders	Slider, range, track, marks, tooltip
components-spinners	Spinner, skeleton
components-tabs	Tabs, pill variant, panels
components-tables	Data table, header, rows, cells, sort, empty
components-toasts	Toast notifications, container
components-toggles	Toggle/switch
components-uploads	Drop zone, file list, upload indicator

Import Order

Core is imported first (shared field wrapper, close button), then all components alphabetically.

Tree-Shaking

For smaller bundles, import individual component packages directly:

@import "@vibe-labs/design-components-buttons";
@import "@vibe-labs/design-components-tables";

import type { ButtonStyleProps } from "@vibe-labs/design-components-buttons/types";
import type { TableColumn, TableStyleProps } from "@vibe-labs/design-components-tables/types";

Build

npm run build