Appearance
@vibe-labs/design-components — Contents Reference
Quick-reference for all component tokens, generated classes, and TypeScript types. For component authoring — not consumer docs.
All generated styles live in @layer vibe.components. All tokens in @layer vibe.tokens. Selectors use data-attribute mode by default.
Core (@vibe-labs/design-components-core)
Tokens
Field wrapper:--field-gap (space-1) · --field-label-font-size (text-sm) · --field-label-font-weight (font-semibold) · --field-label-color (text-primary) · --field-help-font-size (text-xs) · --field-help-color (text-muted) · --field-error-font-size (text-xs) · --field-required-color (color-danger)
Close button:--close-btn-color (text-muted) · --close-btn-hover-color (text-primary) · --close-btn-hover-bg (surface-hover-overlay) · --close-btn-radius (radius-sm) · --close-btn-size-sm (1.25rem) · --close-btn-size-md (1.75rem) · --close-btn-size-lg (2rem)
Classes
.field — vertical flex column (label → control → help/error) .field[data-horizontal] — row layout, fixed-width label .field-label · .field-required · .field-help · .field-error · .field-success.close-btn — inline-flex centered button .close-btn[data-size="sm|md|lg"]
Types
CloseBtnSizes · CloseBtnSize · FieldStyleProps · FieldLabelStyleProps · FieldRequiredStyleProps · FieldHelpStyleProps · FieldErrorStyleProps · FieldSuccessStyleProps · CloseBtnStyleProps
Avatars (@vibe-labs/design-components-avatars)
Tokens
Sizes: --avatar-size-{xs|sm|md|lg|xl} (1.5rem / 2rem / 2.5rem / 3.5rem / 5rem) Font sizes: --avatar-font-size-{xs|sm|md|lg|xl}Appearance: --avatar-font-weight (font-semibold) · --avatar-bg (surface-elevated) · --avatar-color (text-primary) · --avatar-border-width (2px) · --avatar-border-color (surface-base) · --avatar-group-overlap (-0.5rem)
Classes
.avatar — circular container .avatar[data-size="xs|sm|md|lg|xl"].avatar[data-ring] — outer ring via box-shadow .avatar-initials — uppercase text fallback .avatar-status — positioned indicator dot (bottom-right) .avatar-status[data-status="online|offline|busy|away"] — semantic colors (success/neutral/danger/warning) .avatar-group — horizontal stack with overlap + border separation .avatar-overflow — "+N" count badge
Types
AvatarSizes · AvatarStatuses · AvatarSize · AvatarStatus · AvatarStyleProps · AvatarStatusStyleProps · AvatarGroupStyleProps
Badges (@vibe-labs/design-components-badges)
Tokens
Sizing: --badge-height-{sm|md|lg} (1.25rem / 1.5rem / 1.75rem) · --badge-px-{sm|md|lg} · --badge-font-size-{sm|md|lg}Appearance: --badge-radius (radius-full) · --badge-font-weight (font-semibold) · --badge-bg (surface-elevated) · --badge-color (text-secondary) · --badge-border-width (border-width-1)
Classes
.badge — inline-flex pill .badge[data-variant="accent|success|warning|danger|info|accent-subtle|success-subtle|warning-subtle|danger-subtle|info-subtle|outline"].badge[data-size="sm|md|lg"].badge[data-dot] — collapses to 0.5rem status dot .badge[data-pill] — full radius .badge[data-square] — small radius .badge[data-interactive] — pointer + hover opacity .badge[data-removable] — reduced right padding .badge-icon · .badge-label · .badge-dismiss.badge-group — flex wrap container .badge-count · .badge-count--anchored · .badge-count--pulse.badge-count-anchor — relative wrapper for anchored counts
Types
BadgeSizes · BadgeVariants · BadgeSize · BadgeVariant · BadgeStyleProps · BadgeGroupStyleProps
Buttons (@vibe-labs/design-components-buttons)
Tokens
Variant tokens (per variant): --btn-{primary|secondary|ghost|danger|link}-{bg|color|border|hover-bg|hover-border|active-bg|active-border}Other: --btn-loading-spinner-width (spinner-width, 2px) · --btn-spinner-color (color-accent-contrast) · --btn-group-overlap (border-width-1)
Note: Core sizing tokens (--btn-height-*, --btn-px-*, --btn-radius, --btn-font-weight, --btn-font-size-*) owned by @vibe-labs/design-forms.
Classes
.btn — base button .btn[data-variant="primary|secondary|ghost|danger|link"].btn[data-size="sm|md|lg"].btn[data-loading] — hides text, shows CSS spinner via ::after.btn[data-full] — width: 100% .btn[data-icon] — square icon button (aspect-ratio: 1, no padding) .btn:disabled / .btn[aria-disabled] — reduced opacity, not-allowed .btn-group — inline flex, strips inner radii, overlaps borders
Types
ButtonSizes · ButtonVariants · ButtonSize · ButtonVariant · ButtonStyleProps · ButtonGroupStyleProps
Cards (@vibe-labs/design-components-cards)
Tokens
Padding: --card-padding-{sm|md|lg} (space-3 / space-4 / space-6) Appearance: --card-radius (radius-lg) · --card-bg (surface-base) · --card-border-color (border-subtle) · --card-border-width (border-width-1) · --card-shadow (shadow-sm) · --card-shadow-hover (shadow-md) · --card-header-border (border-subtle) · --card-footer-border (border-subtle) · --card-footer-bg (surface-subtle) · --card-hover-bg (surface-elevated)
Classes
.card — flex column container .card[data-variant="default|elevated|outlined|ghost|gradient|gradient-subtle|gradient-elevated"].card[data-size="sm|md|lg"].card[data-interactive] — pointer, hover transitions, focus ring .card[data-horizontal] — row layout, media capped at 40% .card[data-seamless] — removes internal borders + footer bg .card[data-flush] — removes all section padding .card-header — flex row, bottom border .card-body — flex-grow content .card-footer — flex row, top border, subtle bg .card-media — overflow-hidden, object-fit cover
Types
CardSizes · CardVariants · CardSize · CardVariant · CardStyleProps · CardHeaderStyleProps · CardBodyStyleProps · CardFooterStyleProps · CardMediaStyleProps
Dropdowns (@vibe-labs/design-components-dropdowns)
Tokens
Menu: --dropdown-bg (surface-elevated) · --dropdown-border-color (border-subtle) · --dropdown-border-width (border-width-1) · --dropdown-radius (radius-lg) · --dropdown-shadow (shadow-lg) · --dropdown-padding (space-1) · --dropdown-min-width (10rem) · --dropdown-max-height (20rem) · --dropdown-z (z-dropdown) Items: --dropdown-item-height (2rem) · --dropdown-item-px (space-2) · --dropdown-item-radius (radius-sm) · --dropdown-item-font-size (text-sm) · --dropdown-item-color (text-primary) · --dropdown-item-hover-bg (surface-hover-overlay) · --dropdown-item-active-bg (surface-active-overlay) · --dropdown-item-disabled-opacity (input-disabled-opacity) Groups: --dropdown-group-label-font-size (text-xs) · --dropdown-group-label-color (text-muted) · --dropdown-divider-color (border-subtle)
Classes
.dropdown — relative inline-flex wrapper .dropdown-menu — absolutely positioned panel (hidden by default) .dropdown-menu[data-align="bottom-start|bottom-end|bottom-center|top-start|top-end"].dropdown-menu[data-open] — visible with fade-in .dropdown-menu[data-full] — matches trigger width .dropdown-item — interactive row .dropdown-item[data-variant="danger"] — red text, danger hover .dropdown-item[aria-selected] / [aria-checked] — selected state .dropdown-item-icon · .dropdown-item-trail · .dropdown-item-desc.dropdown-group · .dropdown-group-label · .dropdown-divider
Types
DropdownAlignments · DropdownItemVariants · DropdownAlignment · DropdownItemVariant · DropdownStyleProps · DropdownMenuStyleProps · DropdownItemStyleProps · DropdownItemIconStyleProps · DropdownItemTrailStyleProps · DropdownItemDescStyleProps · DropdownGroupStyleProps · DropdownGroupLabelStyleProps · DropdownDividerStyleProps
Graphs (@vibe-labs/design-components-graphs)
Tokens
Series palette: --graph-series-{1–8} · --graph-series-opacity (0.15) Status series: --graph-positive (success) · --graph-negative (danger) · --graph-warning (warning) · --graph-neutral (muted) Axes/grid: axis lines, labels, titles, major/minor ticks, major/minor grid lines (with dash patterns) Tooltip: bg, border, shadow, padding, label color, value weight Legend: font size, color, gap, swatch size/radius, inactive opacity Points: size, hover size, stroke width/color Lines: width, hover width, round caps/joins Bars: border radius, gap, hover brightness Annotations: reference line dash, label bg, positive/negative/warning variants Highlight/selection: region fill/border, selection fill
Classes
.graph — relative container with padding .graph[data-ratio="16x9|4x3|1x1|21x9"].graph-canvas — full SVG container .graph-point · .graph-line · .graph-bar — data elements with hover transitions .graph-point[data-color="1–8|positive|negative|warning|neutral"] (same for line, bar) .graph-point[data-area] — reduced fill opacity for area series .graph-tooltip · .graph-tooltip-label · .graph-tooltip-row · .graph-tooltip-swatch · .graph-tooltip-value.graph-legend · .graph-legend-item · .graph-legend-item[data-inactive] · .graph-legend-swatch · .graph-legend-swatch[data-line].graph-crosshair — dashed tracking line .graph-annotation · .graph-annotation[data-variant="positive|negative|warning"] · .graph-annotation-label.graph-highlight · .graph-selection.graph-empty — centered no-data message
Types
GRAPH_SERIES_COUNT (8) · GraphRatios · GraphStatusSeries · GraphAnnotationVariants · GraphRatio · GraphStatusSeriesName · GraphAnnotationVariant · GraphStyleProps · GraphSeriesStyleProps · GraphLegendItemStyleProps · GraphLegendSwatchStyleProps · GraphAnnotationStyleProps
Images (@vibe-labs/design-components-images)
Tokens
None (CSS reserved for future use).
Types
ImageFits · ImagePositions · BgFits · BgPositions · ImageLoadingStrategies · FetchPriorities · ImageDecodings · ImageStatuses · ImageFit · ImagePosition · ImageStyleProps · BgImageStyleProps · PictureSource · ImageDimensions · ImageQueueOptions
Inputs (@vibe-labs/design-components-inputs)
Tokens
Text input: --input-bg (surface-base) · --input-color (text-primary) · --input-radius (radius-md) · --input-font-size-{sm|md|lg} · --input-px-{sm|md|lg} · --input-placeholder-color (text-muted) · --input-focus-border (color-accent) · --input-error-border (color-danger) · --input-error-color (color-danger) · --input-success-border (color-success) · --input-success-color (color-success) · --textarea-min-height (5rem)
Note: Core sizing tokens (--input-height-*, --input-border, --input-disabled-opacity) owned by @vibe-labs/design-forms.
Checkbox: --checkbox-size-{sm|md|lg} (0.875rem / 1rem / 1.25rem) · --checkbox-radius (radius-xs) · --checkbox-bg (surface-base) · --checkbox-border-color (border-strong) · --checkbox-checked-bg (color-accent) · --checkbox-checked-border (color-accent) · --checkbox-check-color (color-accent-contrast)
Radio: --radio-size-{sm|md|lg} (0.875rem / 1rem / 1.25rem) · --radio-bg (surface-base) · --radio-border-color (border-strong) · --radio-checked-bg (color-accent) · --radio-checked-border (color-accent) · --radio-dot-color (color-accent-contrast) · --radio-dot-scale (0.4)
Classes
Text input:.input — full-width block .input[data-size="sm|md|lg"].input[data-state="error|success"] — border + ring color .input-wrap — container with leading/trailing slots .input-leading · .input-trailing — positioned slots (auto-padding via :has()) .input[data-no-resize] · .input[data-auto-grow] — textarea modifiers
Checkbox:.checkbox — inline-flex label with hidden input, styled box, animated checkmark .checkbox[data-size="sm|md|lg"].checkbox[data-state="error"].checkbox-group · .checkbox-group[data-horizontal]
Radio:.radio — inline-flex label with hidden input, styled circle, ::after dot .radio[data-size="sm|md|lg"].radio[data-state="error"].radio-group · .radio-group[data-horizontal]
Types
InputSizes · InputStates · CheckboxSizes · RadioSizes · InputSize · InputState · InputStyleProps · InputWrapStyleProps · InputLeadingStyleProps · InputTrailingStyleProps · TextareaStyleProps · CheckboxStyleProps · CheckboxGroupStyleProps · RadioStyleProps · RadioGroupStyleProps
Lists (@vibe-labs/design-components-lists)
Tokens
Container: --list-bg (surface-base) · --list-border-color (border-subtle) · --list-border-width (border-width-1) · --list-radius (radius-lg) · --list-padding (space-1) · --list-gap (0) Item sizing: --list-item-height-{sm|md|lg} (2rem / 2.5rem / 3rem) · --list-item-px (space-3) · --list-item-gap (space-3) · --list-item-radius (radius-md) · --list-item-font-size-{sm|md|lg} (text-xs / text-sm / text-base) Item appearance: --list-item-color (text-primary) · --list-item-bg (transparent) · --list-item-hover-bg (surface-hover-overlay) · --list-item-active-bg (surface-active-overlay) · --list-item-disabled-opacity (input-disabled-opacity) Selection: --list-item-selected-bg (accent @ 8% mix) · --list-item-selected-color (text-primary) · --list-item-selected-indicator (color-accent) · --list-item-selected-indicator-width (3px) Divider: --list-divider-color (border-subtle) · --list-divider-indent (0) Icon: --list-icon-size (1.125rem) · --list-icon-color (text-muted) · --list-icon-active-color (color-accent) Description: --list-description-font-size (text-xs) · --list-description-color (text-muted) Trail: --list-trail-color (text-muted) · --list-trail-font-size (text-xs) Group: --list-group-label-font-size (text-xs) · --list-group-label-color (text-muted) · --list-group-label-font-weight (font-semibold) · --list-group-label-px (space-3) · --list-group-label-py (space-2) Empty state: --list-empty-py (space-8) · --list-empty-color (text-muted) · --list-empty-font-size (text-sm) Drag/reorder: --list-handle-color (text-muted) · --list-handle-hover-color (text-secondary) · --list-handle-size (1rem) · --list-dragging-opacity (0.5) · --list-dragging-shadow (shadow-lg) · --list-drop-indicator-color (color-accent) · --list-drop-indicator-height (2px) Stripe: --list-stripe-bg (surface-subtle)
Classes
.list — flex column container with background, border, radius .list[data-variant="default|outlined|elevated|ghost"].list[data-size="sm|md|lg"] — density (controls item min-height + font size) .list[data-divided] — auto border-top between adjacent items .list[data-striped] — alternating row backgrounds via :nth-child(even).list[data-hoverable] — hover bg transition on items .list[data-interactive] — cursor: pointer + active press bg on items .list[data-flush] — strips all container chrome (bg, border, radius, padding) .list-item — flex row with gap for slots, transition on bg/opacity/shadow .list-item[data-selected] — accent-tinted bg + left accent indicator via inset box-shadow .list-item[data-disabled] — reduced opacity, pointer-events: none .list-item[data-dragging] — reduced opacity + elevated shadow .list-item[data-drag-over] — bottom accent drop indicator via inset box-shadow .list-item:focus-visible — inset focus ring (combined with selected indicator when both apply) .list-item-icon — leading icon, accent-colored when item selected .list-item-content — flex column wrapper for label + description .list-item-label — primary text, truncated with ellipsis .list-item-description — secondary text, smaller + muted, truncated .list-item-trail — trailing slot, auto-pushed right via margin-left: auto .list-item-handle — drag grip, grab/grabbing cursor, touch-action: none .list-group — flex column section wrapper .list-group-label — uppercase muted label with padding .list-divider — explicit horizontal rule with optional indent .list-empty — centred muted text with generous vertical padding
Types
ListVariants · ListSizes · ListVariant · ListSize · ListStyleProps · ListItemStyleProps · ListItemIconStyleProps · ListItemContentStyleProps · ListItemLabelStyleProps · ListItemDescriptionStyleProps · ListItemTrailStyleProps · ListItemHandleStyleProps · ListGroupStyleProps · ListGroupLabelStyleProps · ListDividerStyleProps · ListEmptyStyleProps
Menus (@vibe-labs/design-components-menus)
Tokens
Item: --menu-item-height (2.25rem) · --menu-item-px (space-3) · --menu-item-radius (radius-md) · --menu-item-font-size (text-sm) · --menu-item-font-weight (400) · --menu-item-color (text-secondary) · --menu-item-hover-bg (surface-hover-overlay) · --menu-item-active-bg (surface-active-overlay) · --menu-item-active-color (text-primary) · --menu-item-active-font-weight (font-semibold) · --menu-item-active-indicator (color-accent) Icons: --menu-icon-size (1.125rem) · --menu-icon-color (text-muted) · --menu-icon-active-color (color-accent) Groups: --menu-group-label-font-size (text-xs) · --menu-group-label-color (text-muted) · --menu-group-label-font-weight (font-semibold) · --menu-divider-color (border-subtle) Nesting: --menu-indent (space-4) · --menu-nested-indicator-width (1px) · --menu-nested-indicator-color (border-subtle) Submenu/flyout: --menu-submenu-bg (surface-elevated) · --menu-submenu-border-color (border-subtle) · --menu-submenu-radius (radius-lg) · --menu-submenu-shadow (shadow-lg) · --menu-submenu-z (z-dropdown) · --menu-collapse-speed (duration-normal)
Classes
.menu — vertical flex column .menu[data-horizontal] — row layout .menu[data-compact] — icon-only sidebar mode .menu-item — interactive row with aria-current active state .menu-icon · .menu-label · .menu-trail · .menu-chevron.menu-group · .menu-group-label · .menu-divider.menu-collapse · .menu-collapse[data-expanded] — nested expand/collapse .menu-flyout · .menu-flyout[data-align="right|bottom"] · .menu-flyout[data-open]
Types
MenuFlyoutAlignments · MenuFlyoutAlignment · MenuStyleProps · MenuItemStyleProps · MenuIconStyleProps · MenuLabelStyleProps · MenuTrailStyleProps · MenuChevronStyleProps · MenuGroupStyleProps · MenuGroupLabelStyleProps · MenuDividerStyleProps · MenuCollapseStyleProps · MenuFlyoutStyleProps
Modals (@vibe-labs/design-components-modals)
Tokens
Backdrop: --modal-backdrop-bg (overlay-scrim) · --modal-backdrop-blur (4px) · --modal-z (z-modal, 400) Container: --modal-bg (surface-elevated) · --modal-border-color (border-subtle) · --modal-border-width (border-width-1) · --modal-radius (radius-xl) · --modal-shadow (shadow-xl) Sizing: --modal-width-{sm|md|lg|xl|full} (24rem / 32rem / 42rem / 56rem / calc(100vw - space-8)) · --modal-max-height (calc(100vh - space-8)) · --modal-margin (space-4) Sections: --modal-padding-x (space-6) · --modal-padding-y (space-5) · --modal-header-gap (space-4) · --modal-footer-gap (space-3) · --modal-section-border (border-subtle) · --modal-title-font-size (text-lg) · --modal-title-font-weight (font-semibold) · --modal-speed (duration-normal)
Classes
.modal-backdrop — fixed fullscreen overlay with scrim + blur .modal-backdrop[data-entering] · [data-exiting] — fade animations .modal — flex column with max-height .modal[data-size="sm|md|lg|xl|full"].modal[data-variant="danger"] — danger header border .modal[data-seamless] — no internal borders .modal[data-centered] — centered body text .modal[data-drawer] — right-side slide-in panel .modal-header · .modal-title · .modal-description · .modal-body · .modal-footer.modal-footer[data-split] — space-between layout
Types
ModalSizes · ModalVariants · ModalSize · ModalVariant · ModalBackdropStyleProps · ModalStyleProps · ModalHeaderStyleProps · ModalTitleStyleProps · ModalDescriptionStyleProps · ModalBodyStyleProps · ModalFooterStyleProps
Pagination (@vibe-labs/design-components-pagination)
Tokens
--pagination-gap (space-1) · --pagination-item-size (2rem) · --pagination-item-radius (radius-md) · --pagination-item-font-size (text-sm) · --pagination-item-font-weight (400) · --pagination-item-color (text-secondary) · --pagination-item-bg (transparent) · --pagination-item-hover-bg (surface-hover-overlay) · --pagination-item-active-bg (color-accent) · --pagination-item-active-color (color-accent-contrast) · --pagination-item-active-font-weight (font-semibold) · --pagination-item-disabled-opacity (input-disabled-opacity) · --pagination-ellipsis-color (text-muted)
Classes
.pagination — flex row container .pagination-item — interactive page button, aria-current marks active (accent bg) .pagination-ellipsis — non-interactive "…"
Types
PaginationStyleProps · PaginationItemStyleProps · PaginationEllipsisStyleProps
Progress (@vibe-labs/design-components-progress)
Tokens
Track: --progress-height-{sm|md|lg} (0.25rem / 0.5rem / 0.75rem) · --progress-radius (radius-full) · --progress-bg (surface-overlay) Fill: --progress-fill (color-accent) · --progress-fill-{success|warning|danger}Indeterminate: --progress-indeterminate-speed (1.5s) Radial: --progress-radial-size-{sm|md|lg} (2rem / 3rem / 5rem) · --progress-radial-stroke-width (3px)
Classes
Linear:.progress — full-width track .progress[data-size="sm|md|lg"].progress-fill — width via --progress-value.progress[data-variant="accent|success|warning|danger|auto"].progress[data-indeterminate] — sliding animation .progress[data-striped] · [data-animated] — stripe overlay .progress-field · .progress-label · .progress-label-value
Radial:.progress-radial · .progress-radial[data-size="sm|md|lg"].progress-radial-track · .progress-radial-fill · .progress-radial-label
Types
ProgressSizes · ProgressVariants · ProgressRadialSizes · ProgressSize · ProgressVariant · ProgressStyleProps · ProgressRadialStyleProps
Responsive (@vibe-labs/design-components-responsive)
Tokens
Grid: --responsive-grid-gap (space-4) Stack: --responsive-stack-gap (space-4)
Classes
.responsive-container — container query context, defaults to inline-size.responsive-container[data-type="inline|size|normal"].responsive-container[data-name="main|sidebar|card|panel"]
.responsive-grid — 12-column grid with container-query breakpoint overrides .responsive-grid[data-cols="1–12"] — default column count .responsive-grid[data-cols-xs="1–12"] through [data-cols-2xl="1–12"] — per-breakpoint columns
.responsive-stack — flex column, switches to row at breakpoint .responsive-stack[data-breakpoint="xs|sm|md|lg|xl|2xl"]
Breakpoints: xs (480px) · sm (640px) · md (768px) · lg (1024px) · xl (1280px) · 2xl (1536px)
Types
Breakpoints · Breakpoint · ContainerTypes · ContainerType · ContainerNames · ContainerName · GridColumns · GridColumn · ResponsiveContainerStyleProps · ResponsiveGridStyleProps · ResponsiveStackStyleProps
Sliders (@vibe-labs/design-components-sliders)
Tokens
Track: --slider-track-height-{sm|md|lg} (2px / 4px / 6px) · --slider-track-radius (radius-full) · --slider-track-bg (surface-overlay) · --slider-track-fill (color-accent) · --slider-track-fill-hover (color-accent-hover) · --slider-track-border-width (0) · --slider-track-border-color (border-subtle) Thumb — circle: --slider-thumb-size-{sm|md|lg} (0.75rem / 1rem / 1.25rem) · --slider-thumb-bg (neutral-0) · --slider-thumb-border-width (2px) · --slider-thumb-border-color (color-accent) · --slider-thumb-shadow (shadow-sm) · --slider-thumb-shadow-active (shadow-md) · --slider-thumb-scale-hover (1.15) · --slider-thumb-scale-active (1.25) · --slider-thumb-transition (duration-fast) Thumb — bar: --slider-bar-width-{sm|md|lg} (2px / 3px / 4px) · --slider-bar-height-{sm|md|lg} (0.875rem / 1.125rem / 1.375rem) · --slider-bar-radius (radius-full) Marks: --slider-mark-size (4px) · --slider-mark-color (surface-overlay) · --slider-mark-color-active (color-accent) · --slider-mark-label-font-size (text-xs) · --slider-mark-label-color (text-muted) · --slider-mark-label-gap (space-2) Tooltip: --slider-tooltip-bg (surface-elevated) · --slider-tooltip-color (text-primary) · --slider-tooltip-font-size (text-xs) · --slider-tooltip-font-weight (font-semibold) · --slider-tooltip-px (space-2) · --slider-tooltip-py (space-1) · --slider-tooltip-radius (radius-md) · --slider-tooltip-shadow (shadow-md) · --slider-tooltip-offset (space-2) Range: --slider-range-fill (color-accent) · --slider-range-fill-hover (color-accent-hover) Focus: --slider-focus-ring-width (input-focus-ring-width) · --slider-focus-ring-color (input-focus-ring-color)
Classes
Container:.slider — relative flex container, touch-action: none, cursor: pointer .slider[data-size="sm|md|lg"] — controls track height + thumb size .slider[data-orientation="vertical"] — column layout, axis-swapped .slider[data-disabled] — reduced opacity, pointer-events: none .slider[data-range] — dual-thumb mode, fill positioned between thumbs .slider[data-tooltip="hover|always"] — tooltip visibility mode
Track:.slider-track — full-width rounded container .slider-track-fill — left-anchored fill, width via --slider-fill.slider-track-fill[data-color="accent|success|warning|danger"] — semantic fill color
Thumb:.slider-thumb — absolute, centered on track, circle by default, grab cursor .slider-thumb[data-shape="circle|bar|pill|none"] — shape variants .slider-thumb[data-active] — scale up, deeper shadow, grabbing cursor .slider-thumb:focus-visible — focus ring
Marks:.slider-marks — absolute container, pointer-events: none .slider-mark — dot at step position .slider-mark[data-active] — accent color when below value .slider-mark-label — positioned text below track (or beside for vertical)
Tooltip:.slider-tooltip — absolute above thumb, hidden by default .slider-tooltip[data-visible] — visible with upward nudge
Input:.slider-input — sr-only (visually hidden, keyboard accessible)
Types
SliderSizes · SliderThumbShapes · SliderTrackColors · SliderTooltipModes · SliderOrientations · SliderSize · SliderThumbShape · SliderTrackColor · SliderTooltipMode · SliderOrientation · SliderStyleProps · SliderTrackStyleProps · SliderTrackFillStyleProps · SliderThumbStyleProps · SliderMarkStyleProps · SliderMarkLabelStyleProps · SliderTooltipStyleProps
Spinners (@vibe-labs/design-components-spinners)
Tokens
Spinner: --spinner-{xs|sm|md|lg|xl} (0.75rem → 3rem) · --spinner-width (2px) · --spinner-width-lg (3px) · --spinner-width-xl (4px) · --spinner-color (color-accent) · --spinner-track-color (transparent) · --spinner-speed (0.6s) Skeleton: --skeleton-base (surface-elevated) · --skeleton-highlight (surface-overlay) · --skeleton-radius (radius-sm) · --skeleton-speed (1.5s)
Classes
Spinner:.spinner — border-based rotating circle .spinner[data-size="xs|sm|md|lg|xl"].spinner[data-color="accent|white|muted|success|danger|current"].spinner-wrap · .spinner-wrap[data-stacked].spinner-overlay — absolute scrim with centered spinner
Skeleton:.skeleton — block placeholder with shimmer .skeleton[data-shape="text|heading|circle|rect"].skeleton[data-size="xs|sm|md|lg|xl"].skeleton[data-static] — no shimmer
Types
SpinnerSizes · SpinnerColors · SkeletonShapes · SkeletonSizes · SpinnerSize · SpinnerColor · SkeletonShape · SkeletonSize · SpinnerStyleProps · SpinnerWrapStyleProps · SpinnerOverlayStyleProps · SkeletonStyleProps
Tabs (@vibe-labs/design-components-tabs)
Tokens
Tab list: --tabs-border-color (border-subtle) · --tabs-border-width (border-width-1) · --tabs-gap (0) Tab item: --tab-height (2.5rem) · --tab-px (space-4) · --tab-font-size (text-sm) · --tab-font-weight (400) · --tab-color (text-secondary) · --tab-hover-color (text-primary) · --tab-hover-bg (surface-hover-overlay) · --tab-active-color (text-primary) · --tab-active-font-weight (font-semibold) Indicator: --tab-indicator-height (2px) · --tab-indicator-color (color-accent) · --tab-indicator-radius (radius-full) Pill variant: --tab-pill-radius (radius-full) · --tab-pill-bg (transparent) · --tab-pill-active-bg (surface-elevated) · --tab-pill-active-shadow (shadow-xs) Panel: --tab-panel-padding (space-4)
Classes
.tabs — flex row with bottom border .tabs[data-variant="pill"] — contained pill mode .tabs[data-scrollable] — horizontal overflow scroll .tabs[data-full] — stretch tabs evenly .tab — interactive button, aria-selected activates indicator via ::after.tab-icon · .tab-badge.tab-panel — content area, supports [hidden]
Types
TabsVariants · TabsVariant · TabsStyleProps · TabStyleProps · TabIconStyleProps · TabBadgeStyleProps · TabPanelStyleProps
Tables (@vibe-labs/design-components-tables)
Tokens
Container: --table-bg (surface-base) · --table-border-color (border-subtle) · --table-border-width (border-width-1) · --table-radius (radius-lg) Header: --table-header-bg (surface-subtle) · --table-header-color (text-muted) · --table-header-font-size (text-xs) · --table-header-font-weight (font-bold) · --table-header-text-transform (uppercase) · --table-header-height-{sm|md|lg} (2rem / 2.5rem / 3rem) · --table-header-px (space-3) Row: --table-row-height-{sm|md|lg} (2.25rem / 2.75rem / 3.25rem) · --table-row-px (space-3) · --table-row-border-color (border-subtle) · --table-row-bg (transparent) · --table-row-bg-stripe (surface-subtle) · --table-row-hover-bg (surface-hover-overlay) · --table-row-selected-bg (accent @ 8% mix) · --table-row-selected-border (color-accent) Cell: --table-cell-px (space-2) · --table-cell-font-size-{sm|md|lg} (text-xs / text-sm / text-base) · --table-cell-color (text-primary) Sort indicator: --table-sort-indicator-color (text-muted) · --table-sort-indicator-active-color (color-accent) · --table-sort-indicator-size (0.75rem) Empty state: --table-empty-py (space-12) · --table-empty-color (text-muted) · --table-empty-font-size (text-sm) Footer: --table-footer-bg (transparent) · --table-footer-border-color (border-subtle) · --table-footer-px (space-3) · --table-footer-py (space-2)
Classes
.table — overflow-hidden flex column with border + radius .table[data-variant="default|outlined|elevated|ghost"].table[data-size="sm|md|lg"] — density (controls header/row heights + cell font size) .table[data-striped] — alternating row backgrounds via :nth-child(even).table[data-hoverable] — row hover bg transition .table[data-interactive] — cursor: pointer on rows .table[data-fixed-header] — sticky header .table[data-full] — width: 100% .table-header — flex row, header bg, bottom border .table-header-cell — flex item, uppercase, muted color .table-header-cell[data-align="left|center|right"].table-header-cell[data-sortable] — cursor: pointer, hover chevron .table-header-cell[data-sorted="asc|desc"] — active sort indicator (accent color, rotation) .table-row — flex row, bottom border, transition bg .table-row[data-selected] — accent-tinted bg + left border accent strip .table-row[data-disabled] — reduced opacity, pointer-events: none .table-cell — flex item, cell padding .table-cell[data-align="left|center|right"].table-cell[data-truncate] — ellipsis overflow (with child support) .table-cell[data-mono] — monospace + tabular-nums .table-cell[data-nowrap] — prevent wrapping without truncation .table-empty — centered muted text, generous padding .table-footer — flex row, top border .table-footer[data-align="left|center|right|between"]
Types
TableSizes · TableVariants · TableAlignments · TableSortDirections · TableSize · TableVariant · TableAlignment · TableSortDirection · TableColumn · TableSortState · TableRowKey · TableStyleProps · TableHeaderStyleProps · TableHeaderCellStyleProps · TableRowStyleProps · TableCellStyleProps · TableEmptyStyleProps · TableFooterStyleProps
Toasts (@vibe-labs/design-components-toasts)
Tokens
Sizing: --toast-max-width (24rem) · --toast-min-width (16rem) · --toast-padding-x (space-4) · --toast-padding-y (space-3) · --toast-gap (space-3) Appearance: --toast-radius (radius-lg) · --toast-bg (surface-elevated) · --toast-color (text-primary) · --toast-border-color (border-subtle) · --toast-border-width (border-width-1) · --toast-shadow (shadow-lg) Container: --toast-container-gap (space-2) · --toast-container-inset (space-4) · --toast-z (z-toast, 600)
Classes
.toast — flex row with pointer-events: auto .toast[data-variant="success|warning|danger|info"] — 3px left border accent + status bg .toast[data-entering] — slide-in-right .toast[data-exiting] — fade-out forwards .toast-icon · .toast-content · .toast-title · .toast-description · .toast-actions.toast-container — fixed positioned, pointer-events: none .toast-container[data-position="top-right|top-left|top-center|bottom-right|bottom-left|bottom-center"]
Types
ToastVariants · ToastContainerPositions · ToastVariant · ToastContainerPosition · ToastStyleProps · ToastContainerStyleProps · ToastIconStyleProps · ToastContentStyleProps · ToastTitleStyleProps · ToastDescriptionStyleProps · ToastActionsStyleProps
Toggles (@vibe-labs/design-components-toggles)
Tokens
Track: --toggle-width-{sm|md|lg} (2rem / 2.5rem / 3rem) · --toggle-height-{sm|md|lg} (1.125rem / 1.375rem / 1.625rem) · --toggle-radius (radius-full) · --toggle-bg (surface-overlay) · --toggle-bg-checked (color-accent) · --toggle-border-width (border-width-1) · --toggle-border-color (border-default) · --toggle-border-color-checked (color-accent) Thumb: --toggle-thumb-size-{sm|md|lg} (0.875rem / 1.125rem / 1.375rem) · --toggle-thumb-color (neutral-0) · --toggle-thumb-shadow (shadow-xs) · --toggle-thumb-inset (2px)
Classes
.toggle — inline-flex track with hidden input .toggle[data-size="sm|md|lg"].toggle-thumb — circular knob, slides on :has(input:checked).toggle-field — inline-flex toggle + label wrapper Disabled: reduced opacity, not-allowed. Focus-visible ring.
Types
ToggleSizes · ToggleSize · ToggleStyleProps · ToggleThumbStyleProps · ToggleFieldStyleProps
Uploads (@vibe-labs/design-components-uploads)
Tokens
Drop zone: --upload-zone-border-width (2px) · --upload-zone-border-style (dashed) · --upload-zone-border-color (border-default) · --upload-zone-border-color-active (color-accent) · --upload-zone-radius (radius-lg) · --upload-zone-bg (transparent) · --upload-zone-bg-active (overlay-tint) · --upload-zone-padding (space-8) · --upload-zone-min-height (10rem) · --upload-zone-color (text-muted) · --upload-zone-icon-size (2.5rem) File list: --upload-list-gap (space-2) · --upload-list-max-height (24rem) File item: --upload-item-bg (surface-elevated) · --upload-item-border-color (border-subtle) · --upload-item-border-width (border-width-1) · --upload-item-radius (radius-md) · --upload-item-padding (space-3) · --upload-item-gap (space-3) · --upload-thumb-size (2.5rem) · --upload-thumb-radius (radius-sm) Status colors: --upload-status-{queued|pending|uploading|complete|error}Indicator: --upload-indicator-size (2rem) · --upload-indicator-bg (surface-elevated) · --upload-indicator-border-color (border-subtle) · --upload-indicator-radius (radius-full) · --upload-indicator-shadow (shadow-sm)
Classes
Drop zone:.upload-zone — dashed border flex container .upload-zone[data-dragover] — accent border + tint .upload-zone[data-compact] — inline row .upload-zone-icon · .upload-zone-label · .upload-zone-browse · .upload-zone-hint
File list:.upload-list — scrollable flex column .upload-list[data-unbounded] — no max height
File item:.upload-item — flex row .upload-item[data-status="queued|pending|uploading|complete|error"].upload-item-thumb · .upload-item-content · .upload-item-name · .upload-item-meta · .upload-item-trail · .upload-item-remove · .upload-item-status.upload-item-progress · .upload-item-progress-fill — 2px bottom bar via --progress-value
Indicator:.upload-indicator — pill status widget .upload-indicator[data-complete] · [data-error].upload-indicator-spinner · .upload-indicator-progress
Types
UploadItemStatuses · UploadItemStatus · UploadZoneStyleProps · UploadZoneIconStyleProps · UploadZoneLabelStyleProps · UploadZoneBrowseStyleProps · UploadZoneHintStyleProps · UploadListStyleProps · UploadItemStyleProps · UploadItemThumbStyleProps · UploadItemContentStyleProps · UploadItemNameStyleProps · UploadItemMetaStyleProps · UploadItemTrailStyleProps · UploadItemRemoveStyleProps · UploadItemStatusIconStyleProps · UploadItemProgressStyleProps · UploadItemProgressFillStyleProps · UploadIndicatorStyleProps · UploadIndicatorSpinnerStyleProps · UploadIndicatorProgressStyleProps