@vibe-labs/design-components — Developer Reference

Overview

@vibe-labs/design-components is the CSS component umbrella package for the Vibe design system. It merges all individual component CSS packages and TypeScript type definitions into a single cohesive import surface.

The package provides:

• All component CSS, written in @layer vibe.components
• TypeScript types for all variant dimensions, size scales, and style prop interfaces
• A consistent data-attribute variant system shared across every component

---

Installation

CSS (umbrella import)

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

Import order matters. The core package must load first; the umbrella handles ordering automatically. When importing individual packages, load core before all others, then alphabetically.

TypeScript types

import type { ButtonVariant, ButtonSize } from "@vibe-labs/design-components/types";

---

The Variant System

All components express visual variants through HTML data attributes. There are no modifier class names.

Attribute	Purpose	Example
data-variant	Named visual style	data-variant="primary"
data-size	Size scale	data-size="sm"
Boolean flags	Feature toggles (presence = true)	data-dot=""
ARIA states	Interactive state	aria-disabled="true"

Data attributes are selected in CSS using attribute selectors:

[data-variant="primary"] { ... }
[data-size="sm"] { ... }
[data-dot] { ... }

---

Package Table

All 24 component packages and their contents:

Package	Contents
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-charts	CSS charts: heatmap, legend
components-dropdowns	Dropdown menu, items, groups
components-graphs	Chart tokens, series, axes, tooltip, legend
components-images	Image types (CSS)
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-timeline	Timeline editor: tracks, blocks, markers, playhead, grid, waveform
components-toasts	Toast notifications, container
components-toggles	Toggle/switch
components-uploads	Drop zone, file list, upload indicator

---

Import Order

When importing the umbrella package, order is managed automatically. When importing individual packages manually:

1. components-core — always first
2. All other packages — alphabetical order

---

Tree-Shaking

To reduce bundle size, import individual component packages instead of the umbrella:

@import "@vibe-labs/components-buttons";
@import "@vibe-labs/components-badges";

import type { ButtonVariant } from "@vibe-labs/components-buttons/types";

---

Building a New Component Package

Package Anatomy

components-{name}/
├── src/
│   ├── index.css          # Component CSS (all rules)
│   └── tokens.css         # Token definitions (@layer vibe.tokens)
├── types/
│   ├── index.ts           # Runtime const arrays + derived literal types
│   └── props.ts           # Style prop interfaces
├── scripts/
│   └── generate.ts        # CSS generation script
├── dist/                  # Build output (do not edit)
├── package.json
└── tsconfig.json

package.json Template

{
  "name": "@vibe-labs/components-{name}",
  "version": "1.0.0",
  "exports": {
    ".": "./dist/index.css",
    "./types": "./dist/types/index.d.ts"
  },
  "scripts": {
    "build": "rimraf dist && ncp src dist && tsc --rootDir types --outDir dist && tsx ./scripts/generate.ts --mode attr"
  }
}

The package exposes exactly two exports:

• . — the compiled CSS entry point
• ./types — the TypeScript declaration file

Build Command

rimraf dist && ncp src dist && tsc --rootDir types --outDir dist && tsx ./scripts/generate.ts --mode attr

Steps performed:

1. rimraf dist — clean previous build
2. ncp src dist — copy source CSS into dist
3. tsc --rootDir types --outDir dist — compile TypeScript types
4. tsx ./scripts/generate.ts --mode attr — generate attribute-driven CSS rules

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "strict": true,
    "declaration": true,
    "declarationMap": true,
    "emitDeclarationOnly": true
  },
  "include": ["types/**/*"]
}

---

Token Definition Patterns

Component tokens live in @layer vibe.tokens and follow a strict naming convention.

Token Naming

Pattern	Use case	Example
--{component}-{property}	Base token	--btn-bg
--{component}-{property}-{size}	Size-scoped token	--btn-height-sm
--{component}-{sub}-{property}	Sub-component token	--btn-icon-size

Token Layer

@layer vibe.tokens {
  :root {
    --btn-bg: var(--color-primary);
    --btn-height-sm: 1.75rem;
    --btn-height-md: 2.25rem;
    --btn-icon-size: 1rem;
  }
}

---

TypeScript Types Structure

Each package exposes three categories of TypeScript exports:

1. Runtime Const Arrays

Used for iteration, validation, and exhaustive checks at runtime:

export const BUTTON_VARIANTS = ["primary", "secondary", "ghost", "danger"] as const;
export const BUTTON_SIZES = ["sm", "md", "lg"] as const;

2. Derived Literal Types

Derived directly from the const arrays to guarantee synchronisation:

export type ButtonVariant = typeof BUTTON_VARIANTS[number];
export type ButtonSize = typeof BUTTON_SIZES[number];

3. Style Prop Interfaces

Used by framework component wrappers (React, Svelte, etc.):

export interface ButtonStyleProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  disabled?: boolean;
}

---

Generate Script Structure

The generate script (scripts/generate.ts) uses a set of shared helpers to emit CSS rules programmatically.

Helpers

Helper	Purpose
layer(name, content)	Wraps content in a named @layer block
rule(selector, declarations)	Emits a CSS rule block
base(name)	Selects the component root by class name
variant(name, dim, value)	Selects a variant via data attribute
flag(name, modifier)	Selects a boolean flag via data attribute presence

Shared Selector Helpers

Import from the shared build utilities:

import { base, variant, flag } from "../../../.build/selectors";

• base(name) — resolves to .{name}
• variant(name, dim, value) — resolves to .{name}[data-{dim}="{value}"]
• flag(name, modifier) — resolves to .{name}[data-{modifier}]

Generation Patterns

Base styles:

rule(base("btn"), { display: "inline-flex", alignItems: "center" })

Size variants:

for (const size of BUTTON_SIZES) {
  rule(variant("btn", "size", size), { height: `var(--btn-height-${size})` })
}

Named variants:

for (const v of BUTTON_VARIANTS) {
  rule(variant("btn", "variant", v), { background: `var(--btn-bg-${v})` })
}

Boolean flags:

rule(flag("btn", "loading"), { pointerEvents: "none", opacity: "0.7" })

Sub-components:

rule(`${base("btn")} .btn-icon`, { width: "var(--btn-icon-size)" })

Pseudo-states:

rule(`${base("btn")}:hover`, { background: "var(--btn-bg-hover)" })
rule(`${base("btn")}:focus-visible`, { outline: "var(--focus-ring)" })

---

CSS Layer Placement

All component rules must be placed in @layer vibe.components:

@layer vibe.components {
  .btn { ... }
  .btn[data-variant="primary"] { ... }
}

The vibe.tokens layer sits below vibe.components in specificity. The vibe.utilities layer sits above.

---

Cross-Package Dependencies

Some component packages depend on CSS defined in other packages at runtime. These are runtime CSS dependencies, not npm dependencies — they are not declared in package.json.

Known runtime dependencies:

• All components depend on components-core tokens
• components-graphs depends on components-charts tokens
• components-lists (drag/reorder) depends on components-core field wrapper

When composing a bundle manually, ensure all runtime dependencies are included and loaded in the correct order.

---

Quick Checklist for New Packages

• [ ] Directory structure follows the package anatomy above
• [ ] package.json has exactly two exports (. and ./types)
• [ ] Tokens defined in @layer vibe.tokens with correct naming pattern
• [ ] Component rules defined in @layer vibe.components
• [ ] TypeScript: const arrays + derived types + style prop interfaces
• [ ] Generate script uses shared selector helpers from ../../../.build/selectors
• [ ] Build command produces clean dist/ output
• [ ] Import order: core first if umbrella is not used
• [ ] Runtime CSS dependencies documented in package README

---

@vibe-labs/design-components — Usage Guide

Quick Start

CSS

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

CSS must load BEFORE component classes are applied to any element. If CSS loads after the DOM is painted, you will see unstyled content.

TypeScript

import type { ButtonVariant, ButtonSize, BadgeVariant } from "@vibe-labs/design-components/types";

---

How the Variant System Works

Components do not use modifier class names. All visual variants are expressed through HTML data attributes on the component root element.

<!-- variant -->
<button class="btn" data-variant="primary">Save</button>

<!-- size -->
<button class="btn" data-size="sm">Small</button>

<!-- boolean flag — presence of the attribute is the signal, value is empty -->
<button class="btn" data-loading="">Loading...</button>

<!-- combined -->
<button class="btn" data-variant="danger" data-size="lg" data-loading="">Deleting...</button>

The CSS uses attribute selectors to target these:

/* This is how the library targets variants internally */
.btn[data-variant="primary"] { ... }
.btn[data-size="sm"] { ... }
.btn[data-loading] { ... }

---

Using TypeScript Types

Types are shipped separately and only cover the variant/size/prop surface. They do not affect the CSS.

import type {
  ButtonVariant,
  ButtonSize,
  BadgeVariant,
  InputSize,
} from "@vibe-labs/design-components/types";

// Use in a React component
interface MyButtonProps {
  variant: ButtonVariant;   // "primary" | "secondary" | "ghost" | "danger"
  size?: ButtonSize;        // "sm" | "md" | "lg"
  loading?: boolean;
}

function MyButton({ variant, size = "md", loading }: MyButtonProps) {
  return (
    <button
      class="btn"
      data-variant={variant}
      data-size={size}
      data-loading={loading ? "" : undefined}
    >
      {children}
    </button>
  );
}

---

Component Usage Patterns

Buttons

<!-- Default -->
<button class="btn">Click me</button>

<!-- Primary variant -->
<button class="btn" data-variant="primary">Save</button>

<!-- Danger, large -->
<button class="btn" data-variant="danger" data-size="lg">Delete</button>

<!-- Loading state — disables pointer events -->
<button class="btn" data-variant="primary" data-loading="">Saving...</button>

<!-- Button group -->
<div class="btn-group">
  <button class="btn" data-variant="secondary">Back</button>
  <button class="btn" data-variant="primary">Next</button>
</div>

---

Badges

<!-- Default badge -->
<span class="badge">New</span>

<!-- Variant -->
<span class="badge" data-variant="success">Active</span>
<span class="badge" data-variant="warning">Pending</span>
<span class="badge" data-variant="danger">Error</span>

<!-- With dot indicator (boolean flag) -->
<span class="badge" data-variant="success" data-dot="">Online</span>

<!-- Badge group -->
<div class="badge-group">
  <span class="badge" data-variant="primary">TypeScript</span>
  <span class="badge" data-variant="secondary">CSS</span>
  <span class="badge" data-variant="secondary">React</span>
</div>

---

Cards

<div class="card">
  <div class="card-media">
    <img src="cover.jpg" alt="Cover" />
  </div>
  <div class="card-header">
    <h3>Card Title</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="card-footer">
    <button class="btn" data-variant="primary">Action</button>
  </div>
</div>

---

Inputs

<!-- Default text input -->
<input class="input" type="text" placeholder="Enter value" />

<!-- Size variants -->
<input class="input" data-size="sm" type="text" />
<input class="input" data-size="md" type="text" />
<input class="input" data-size="lg" type="text" />

<!-- Invalid state -->
<input class="input" data-invalid="" type="text" value="bad value" />

<!-- Textarea -->
<textarea class="input" rows="4"></textarea>

<!-- With field wrapper from core -->
<div class="field">
  <label class="field-label" for="email">Email</label>
  <input class="input" id="email" type="email" />
  <span class="field-hint">We will never share your email.</span>
</div>

---

Modals

<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <div class="modal-header">
    <h2 id="modal-title">Confirm Action</h2>
    <button class="close-btn" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Are you sure you want to continue?</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-variant="secondary">Cancel</button>
    <button class="btn" data-variant="primary">Confirm</button>
  </div>
</div>

<!-- Backdrop (rendered behind the modal) -->
<div class="modal-backdrop"></div>

---

Tables

<div class="table-container">
  <table class="table">
    <thead class="table-header">
      <tr>
        <th class="table-cell" data-sort="asc">Name</th>
        <th class="table-cell" data-sort="none">Status</th>
        <th class="table-cell">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row">
        <td class="table-cell">Alice</td>
        <td class="table-cell">
          <span class="badge" data-variant="success">Active</span>
        </td>
        <td class="table-cell">
          <button class="btn" data-size="sm">Edit</button>
        </td>
      </tr>
      <tr class="table-row">
        <td class="table-cell">Bob</td>
        <td class="table-cell">
          <span class="badge" data-variant="warning">Pending</span>
        </td>
        <td class="table-cell">
          <button class="btn" data-size="sm">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Empty state (shown when no rows) -->
  <div class="table-empty">No results found.</div>
</div>

Sort states on <th> cells use data-sort="asc", data-sort="desc", or data-sort="none".

---

Tree-Shaking

The umbrella import loads all 24 component packages. For smaller bundles, import only what you need:

/* Only load what this page uses */
@import "@vibe-labs/components-core";
@import "@vibe-labs/components-buttons";
@import "@vibe-labs/components-inputs";
@import "@vibe-labs/components-modals";

import type { ButtonVariant } from "@vibe-labs/components-buttons/types";
import type { InputSize } from "@vibe-labs/components-inputs/types";

Always import components-core first. It provides the base tokens and field wrapper that all other packages depend on at runtime.

---

Layer Relationship

The Vibe design system uses CSS @layer to control cascade priority:

vibe.utilities   ← highest priority
vibe.components  ← component structure and variants
vibe.tokens      ← default token values (lowest priority)

Utility classes (from @vibe-labs/utilities) sit above the components layer. This means utility classes can override component tokens:

<!-- The utility class sets a token; the component reads it -->
<button class="btn color-brand-accent" data-variant="primary">
  Custom accent button
</button>

Component classes define structure and use token references internally. Token defaults are set in vibe.tokens and can be overridden at any higher layer without increasing specificity.

---

Package Contents

@vibe-labs/design-components-core

CSS: @import "@vibe-labs/design-components-core";Types: import { CloseBtnSizes } from "@vibe-labs/design-components-core/types";

Tokens

Field: --field-gap · --field-label-font-size · --field-label-font-weight · --field-label-color · --field-help-font-size · --field-help-color · --field-error-font-size · --field-required-color

Close Button: --close-btn-color · --close-btn-hover-color · --close-btn-hover-bg · --close-btn-radius · --close-btn-size-sm · --close-btn-size-md · --close-btn-size-lg

Classes

.field · .field[data-horizontal] · .field-label · .field-required · .field-help · .field-error · .field-success

.close-btn · .close-btn[data-size="sm|md|lg"]

TypeScript

CloseBtnSizes · type CloseBtnSize · interface FieldStyleProps · interface FieldLabelStyleProps · interface FieldRequiredStyleProps · interface FieldHelpStyleProps · interface FieldErrorStyleProps · interface FieldSuccessStyleProps · interface CloseBtnStyleProps

---

@vibe-labs/design-components-avatars

CSS: @import "@vibe-labs/design-components-avatars";Types: import { AvatarSizes, AvatarStatuses } from "@vibe-labs/design-components-avatars/types";

Tokens

Sizes: --avatar-size-xs · --avatar-size-sm · --avatar-size-md · --avatar-size-lg · --avatar-size-xl

Font sizes: --avatar-font-size-xs … --avatar-font-size-xl

Appearance: --avatar-font-weight · --avatar-bg · --avatar-color · --avatar-border-width · --avatar-border-color · --avatar-group-overlap

Classes

.avatar · .avatar[data-size="xs|sm|md|lg|xl"] · .avatar[data-ring]

.avatar-initials · .avatar-status[data-status="online|offline|busy|away"]

.avatar-group · .avatar-overflow

TypeScript

AvatarSizes · AvatarStatuses · type AvatarSize · type AvatarStatus · interface AvatarStyleProps · interface AvatarStatusStyleProps · interface AvatarGroupStyleProps

---

@vibe-labs/design-components-badges

CSS: @import "@vibe-labs/design-components-badges";Types: import { BadgeSizes, BadgeVariants } from "@vibe-labs/design-components-badges/types";

Tokens

Sizing: --badge-height-sm · --badge-height-md · --badge-height-lg · --badge-px-sm · --badge-px-md · --badge-px-lg · --badge-font-size-sm · --badge-font-size-md · --badge-font-size-lg

Appearance: --badge-radius · --badge-font-weight · --badge-bg · --badge-color · --badge-border-width

Classes

.badge · .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] · .badge[data-pill] · .badge[data-square] · .badge[data-interactive] · .badge[data-removable]

.badge-group

TypeScript

BadgeSizes · BadgeVariants · type BadgeSize · type BadgeVariant · interface BadgeStyleProps · interface BadgeGroupStyleProps

---

@vibe-labs/design-components-buttons

CSS: @import "@vibe-labs/design-components-buttons";Types: import { ButtonSizes, ButtonVariants, ButtonShapes } from "@vibe-labs/design-components-buttons/types";

Tokens

Primary: --btn-primary-bg · --btn-primary-color · --btn-primary-border · --btn-primary-hover-bg · --btn-primary-hover-border · --btn-primary-active-bg · --btn-primary-active-border

Secondary: --btn-secondary-bg · --btn-secondary-color · --btn-secondary-border · --btn-secondary-hover-bg · --btn-secondary-hover-border · --btn-secondary-active-bg

Ghost: --btn-ghost-color · --btn-ghost-hover-bg · --btn-ghost-active-bg

Danger: --btn-danger-bg · --btn-danger-color · --btn-danger-border · --btn-danger-hover-bg · --btn-danger-hover-border · --btn-danger-active-bg · --btn-danger-active-border

Link: --btn-link-color · --btn-loading-spinner-width · --btn-spinner-color · --btn-group-overlap

Classes

.btn · .btn[data-variant="primary|secondary|ghost|danger|link"] · .btn[data-size="sm|md|lg"] · .btn[data-shape="circle"]

.btn[data-loading] · .btn[data-full] · .btn[data-icon] · .btn-group

TypeScript

ButtonSizes · ButtonVariants · ButtonShapes · type ButtonSize · type ButtonVariant · type ButtonShape · interface ButtonStyleProps · interface ButtonGroupStyleProps

---

@vibe-labs/design-components-cards

CSS: @import "@vibe-labs/design-components-cards";Types: import { CardSizes, CardVariants } from "@vibe-labs/design-components-cards/types";

Tokens

Padding: --card-padding-sm · --card-padding-md · --card-padding-lg

Appearance: --card-radius · --card-bg · --card-border-color · --card-border-width · --card-shadow · --card-shadow-hover · --card-header-border · --card-footer-border · --card-footer-bg · --card-hover-bg

Classes

.card · .card[data-variant="default|elevated|outlined|ghost|gradient|gradient-subtle|gradient-elevated"]

.card[data-size="sm|md|lg"] · .card[data-interactive] · .card[data-horizontal] · .card[data-seamless] · .card[data-flush]

.card-header · .card-body · .card-footer · .card-media

TypeScript

CardSizes · CardVariants · type CardSize · type CardVariant · interface CardStyleProps · interface CardHeaderStyleProps · interface CardBodyStyleProps · interface CardFooterStyleProps · interface CardMediaStyleProps

---

@vibe-labs/design-components-charts

CSS: @import "@vibe-labs/design-components-charts";Types: import type { ChartHeatmapStyleProps } from "@vibe-labs/design-components-charts/types";

Tokens

Container: --chart-border-radius · --chart-bg · --chart-padding

Heatmap cells: --chart-heatmap-gap-sm · --chart-heatmap-gap-md · --chart-heatmap-gap-lg · --chart-heatmap-cell-radius · --chart-heatmap-cell-size-sm · --chart-heatmap-cell-size-md · --chart-heatmap-cell-size-lg

Intensity: --chart-heatmap-intensity-0 · --chart-heatmap-intensity-1 · --chart-heatmap-intensity-2 · --chart-heatmap-intensity-3 · --chart-heatmap-intensity-4

Legend: --chart-legend-gap · --chart-legend-swatch-size · --chart-legend-swatch-radius

Classes

.chart · .chart-heatmap · .chart-heatmap[data-size="sm|md|lg"] · .chart-heatmap[data-color-scale="accent|success|warning|danger|info"]

.chart-heatmap[data-rounded] · .chart-heatmap[data-gap] · .chart-heatmap-cell · .chart-heatmap-cell[data-intensity="0|1|2|3|4"] · .chart-heatmap-cell[data-interactive]

.chart-heatmap-label-x · .chart-heatmap-label-y · .chart-legend · .chart-legend[data-layout="vertical"] · .chart-legend-item · .chart-legend-swatch · .chart-legend-gradient · .chart-legend-gradient-bar

TypeScript

ChartTypes · HeatmapIntensities · HeatmapSizes · HeatmapColorScales · type ChartType · type HeatmapIntensity · type HeatmapSize · type HeatmapColorScale · interface ChartStyleProps · interface ChartHeatmapStyleProps · interface ChartHeatmapCellStyleProps · interface ChartLegendStyleProps

---

@vibe-labs/design-components-dropdowns

CSS: @import "@vibe-labs/design-components-dropdowns";Types: import { DropdownAlignments, DropdownItemVariants } from "@vibe-labs/design-components-dropdowns/types";

Tokens

Menu: --dropdown-bg · --dropdown-border-color · --dropdown-border-width · --dropdown-radius · --dropdown-shadow · --dropdown-padding · --dropdown-min-width · --dropdown-max-height · --dropdown-z

Items: --dropdown-item-height · --dropdown-item-px · --dropdown-item-radius · --dropdown-item-font-size · --dropdown-item-color · --dropdown-item-hover-bg · --dropdown-item-active-bg · --dropdown-item-disabled-opacity

Groups: --dropdown-group-label-font-size · --dropdown-group-label-color · --dropdown-divider-color

Classes

.dropdown · .dropdown-menu · .dropdown-menu[data-align="bottom-start|bottom-end|bottom-center|top-start|top-end"]

.dropdown-menu[data-open] · .dropdown-menu[data-full]

.dropdown-item · .dropdown-item[data-variant="danger"] · .dropdown-item[data-disabled]

.dropdown-item-icon · .dropdown-item-trail · .dropdown-item-desc · .dropdown-group · .dropdown-group-label · .dropdown-divider

TypeScript

DropdownAlignments · DropdownItemVariants · type DropdownAlignment · type DropdownItemVariant · interface DropdownStyleProps · interface DropdownMenuStyleProps · interface DropdownItemStyleProps · interface DropdownItemIconStyleProps · interface DropdownItemTrailStyleProps · interface DropdownItemDescStyleProps · interface DropdownGroupStyleProps · interface DropdownGroupLabelStyleProps · interface DropdownDividerStyleProps

---

@vibe-labs/design-components-graphs

CSS: @import "@vibe-labs/design-components-graphs";Types: import { GRAPH_SERIES_COUNT, GraphRatios, GraphStatusSeries, RadarGridStyles } from "@vibe-labs/design-components-graphs/types";

Tokens

Series palette: --graph-series-1 … --graph-series-8 · --graph-series-opacity

Status: --graph-positive · --graph-negative · --graph-warning · --graph-neutral

Radar: --graph-radar-grid-color · --graph-radar-grid-width · --graph-radar-grid-opacity · --graph-radar-spoke-color · --graph-radar-spoke-width · --graph-radar-label-color · --graph-radar-label-font-size · --graph-radar-label-font-weight · --graph-radar-label-gap · --graph-radar-fill-opacity · --graph-radar-fill-hover-opacity · --graph-radar-stroke-width · --graph-radar-stroke-hover-width · --graph-radar-point-size · --graph-radar-point-size-hover · --graph-radar-point-stroke-width · --graph-radar-point-stroke-color

Plus tokens for axes, grid, tooltip, legend, points, lines, bars, annotations, highlight, selection, empty state.

Classes

.graph · .graph[data-ratio="16x9|4x3|1x1|21x9"] · .graph-canvas

.graph-point · .graph-line · .graph-bar · .graph-tooltip · .graph-legend · .graph-crosshair

.graph-radar · .graph-radar[data-grid-style="polygon|circle"] · .graph-radar-grid · .graph-radar-spoke · .graph-radar-label · .graph-radar-polygon · .graph-radar-point

Series: [data-color="1|2|3|4|5|6|7|8|positive|negative|warning|neutral"]

TypeScript

GRAPH_SERIES_COUNT · GraphRatios · GraphStatusSeries · GraphAnnotationVariants · RadarGridStyles · type GraphRatio · type GraphStatusSeriesName · type GraphAnnotationVariant · type RadarGridStyle · interface GraphStyleProps · interface GraphSeriesStyleProps · interface GraphLegendItemStyleProps · interface GraphLegendSwatchStyleProps · interface GraphAnnotationStyleProps · interface GraphRadarStyleProps

---

@vibe-labs/design-components-images

CSS: none (reserved — index.css is empty) Types: import { ImageFits, ImagePositions, ImageStatuses } from "@vibe-labs/design-components-images/types";

Tokens

None — this package is type-only with no CSS tokens.

Classes

None — this package provides TypeScript types only. Image styling is applied via framework components consuming the type contracts.

TypeScript

ImageFits · ImagePositions · BgFits · BgPositions · ImageLoadingStrategies · FetchPriorities · ImageDecodings · ImageStatuses

type ImageFit · type ImagePosition · type BgFit · type BgPosition · type ImageLoadingStrategy · type FetchPriority · type ImageDecoding · type ImageStatus

interface ImageDimensions · interface PictureSource · interface ImageStyleProps · interface BgImageStyleProps · interface ImageQueueOptions

---

@vibe-labs/design-components-inputs

CSS: @import "@vibe-labs/design-components-inputs";Types: import { InputSizes, CheckboxSizes, RadioSizes } from "@vibe-labs/design-components-inputs/types";

Tokens

Input: --input-bg · --input-color · --input-radius · --input-font-size-sm · --input-font-size-md · --input-font-size-lg · --input-px-sm · --input-px-md · --input-px-lg · --input-placeholder-color · --input-focus-border · --input-error-border · --input-error-color · --input-success-border · --input-success-color · --textarea-min-height

Checkbox: --checkbox-size-sm · --checkbox-size-md · --checkbox-size-lg · --checkbox-radius · --checkbox-bg · --checkbox-border-color · --checkbox-checked-bg · --checkbox-checked-border · --checkbox-check-color

Radio: --radio-size-sm · --radio-size-md · --radio-size-lg · --radio-bg · --radio-border-color · --radio-checked-bg · --radio-checked-border · --radio-dot-color · --radio-dot-scale

Classes

.input · .input[data-size="sm|md|lg"] · .input[data-state="error|success"] · .input-wrap · .input-leading · .input-trailing

.textarea · .textarea[data-no-resize] · .textarea[data-auto-grow]

.checkbox · .checkbox[data-size="sm|md|lg"] · .checkbox[data-state="error"] · .checkbox-group · .checkbox-group[data-horizontal]

.radio · .radio[data-size="sm|md|lg"] · .radio[data-state="error"] · .radio-group · .radio-group[data-horizontal]

TypeScript

InputSizes · InputStates · CheckboxSizes · RadioSizes · type InputSize · type InputState · type CheckboxSize · type RadioSize · interface InputStyleProps · interface InputWrapStyleProps · interface InputLeadingStyleProps · interface InputTrailingStyleProps · interface TextareaStyleProps · interface CheckboxStyleProps · interface CheckboxGroupStyleProps · interface RadioStyleProps · interface RadioGroupStyleProps

---

@vibe-labs/design-components-lists

CSS: @import "@vibe-labs/design-components-lists";Types: import { ListVariants, ListSizes } from "@vibe-labs/design-components-lists/types";

Tokens

Container: --list-bg · --list-border-color · --list-border-width · --list-radius · --list-padding · --list-gap

Item: --list-item-height-sm · --list-item-height-md · --list-item-height-lg · --list-item-px · --list-item-gap · --list-item-radius · --list-item-font-size-sm · --list-item-font-size-md · --list-item-font-size-lg · --list-item-color · --list-item-bg · --list-item-hover-bg · --list-item-active-bg · --list-item-disabled-opacity

Selection: --list-item-selected-bg · --list-item-selected-color · --list-item-selected-indicator · --list-item-selected-indicator-width

Misc: --list-divider-color · --list-divider-indent · --list-icon-size · --list-icon-color · --list-icon-active-color · --list-description-font-size · --list-description-color · --list-trail-color · --list-trail-font-size · --list-group-label-font-size · --list-group-label-color · --list-group-label-font-weight · --list-group-label-px · --list-group-label-py · --list-empty-py · --list-empty-color · --list-empty-font-size · --list-handle-color · --list-handle-hover-color · --list-handle-size · --list-dragging-opacity · --list-dragging-shadow · --list-drop-indicator-color · --list-drop-indicator-height · --list-stripe-bg

Classes

.list · .list[data-variant="default|outlined|elevated|ghost"] · .list[data-size="sm|md|lg"]

.list[data-divided] · .list[data-striped] · .list[data-hoverable] · .list[data-interactive] · .list[data-flush] · .list[data-reorderable]

.list-item · .list-item[data-selected] · .list-item[data-disabled] · .list-item[data-dragging] · .list-item[data-drag-over]

.list-item-icon · .list-item-content · .list-item-label · .list-item-description · .list-item-trail · .list-item-handle

.list-group · .list-group-label · .list-divider · .list-empty

TypeScript

ListVariants · ListSizes · type ListVariant · type ListSize · interface ListStyleProps · interface ListItemStyleProps · interface ListItemIconStyleProps · interface ListItemContentStyleProps · interface ListItemLabelStyleProps · interface ListItemDescriptionStyleProps · interface ListItemTrailStyleProps · interface ListItemHandleStyleProps · interface ListGroupStyleProps · interface ListGroupLabelStyleProps · interface ListDividerStyleProps · interface ListEmptyStyleProps

---

@vibe-labs/design-components-menus

CSS: @import "@vibe-labs/design-components-menus";Types: import { MenuFlyoutAlignments } from "@vibe-labs/design-components-menus/types";

Tokens

Item: --menu-item-height · --menu-item-px · --menu-item-radius · --menu-item-font-size · --menu-item-font-weight · --menu-item-color · --menu-item-hover-bg · --menu-item-active-bg · --menu-item-active-color · --menu-item-active-font-weight · --menu-item-active-indicator

Icons: --menu-icon-size · --menu-icon-color · --menu-icon-active-color

Groups: --menu-group-label-font-size · --menu-group-label-color · --menu-group-label-font-weight · --menu-divider-color

Nesting: --menu-indent · --menu-nested-indicator-width · --menu-nested-indicator-color

Flyout: --menu-submenu-bg · --menu-submenu-border-color · --menu-submenu-radius · --menu-submenu-shadow · --menu-submenu-z · --menu-collapse-speed

Classes

.menu · .menu[data-horizontal] · .menu[data-compact]

.menu-item · .menu-item[aria-current] · .menu-item[data-disabled]

.menu-icon · .menu-label · .menu-trail · .menu-chevron · .menu-chevron[aria-expanded="true"]

.menu-group · .menu-group-label · .menu-divider

.menu-collapse · .menu-collapse[data-expanded]

.menu-flyout · .menu-flyout[data-align="right|bottom"] · .menu-flyout[data-open]

TypeScript

MenuFlyoutAlignments · type MenuFlyoutAlignment · interface MenuStyleProps · interface MenuItemStyleProps · interface MenuIconStyleProps · interface MenuLabelStyleProps · interface MenuTrailStyleProps · interface MenuChevronStyleProps · interface MenuGroupStyleProps · interface MenuGroupLabelStyleProps · interface MenuDividerStyleProps · interface MenuCollapseStyleProps · interface MenuFlyoutStyleProps

---

@vibe-labs/design-components-modals

CSS: @import "@vibe-labs/design-components-modals";Types: import { ... } from "@vibe-labs/design-components-modals/types";

Tokens

--modal-backdrop-bg · --modal-backdrop-blur · --modal-z · --modal-bg · --modal-border-color · --modal-border-width · --modal-radius · --modal-shadow · --modal-width-sm · --modal-width-md · --modal-width-lg · --modal-width-xl · --modal-width-full · --modal-max-height · --modal-margin · --modal-padding-x · --modal-padding-y · --modal-header-gap · --modal-footer-gap · --modal-section-border · --modal-title-font-size · --modal-title-font-weight · --modal-speed

Classes

.modal-backdrop · .modal · .modal[data-size="sm|md|lg|xl|full"] · .modal[data-variant="danger"] · .modal[data-seamless] · .modal[data-centered] · .modal[data-drawer] · .modal-header · .modal-title · .modal-description · .modal-body · .modal-footer · .modal-footer[data-split]

TypeScript

ModalSizes · ModalVariants · type ModalSize · type ModalVariant · interface ModalBackdropStyleProps · interface ModalStyleProps · interface ModalHeaderStyleProps · interface ModalTitleStyleProps · interface ModalDescriptionStyleProps · interface ModalBodyStyleProps · interface ModalFooterStyleProps

---

@vibe-labs/design-components-pagination

CSS: @import "@vibe-labs/design-components-pagination";Types: import type { ... } from "@vibe-labs/design-components-pagination/types";

Tokens

--pagination-gap · --pagination-item-size · --pagination-item-radius · --pagination-item-font-size · --pagination-item-font-weight · --pagination-item-color · --pagination-item-bg · --pagination-item-hover-bg · --pagination-item-active-bg · --pagination-item-active-color · --pagination-item-active-font-weight · --pagination-item-disabled-opacity · --pagination-ellipsis-color

Classes

.pagination · .pagination-item · .pagination-item[aria-current] · .pagination-item[disabled] · .pagination-ellipsis

TypeScript

interface PaginationStyleProps · interface PaginationItemStyleProps · interface PaginationEllipsisStyleProps

---

@vibe-labs/design-components-progress

CSS: @import "@vibe-labs/design-components-progress";Types: import { ... } from "@vibe-labs/design-components-progress/types";

Tokens

--progress-height-sm · --progress-height-md · --progress-height-lg · --progress-radius · --progress-bg · --progress-fill · --progress-fill-success · --progress-fill-warning · --progress-fill-danger · --progress-indeterminate-speed · --progress-radial-size-sm · --progress-radial-size-md · --progress-radial-size-lg · --progress-radial-stroke-width

Classes

.progress · .progress[data-size="sm|md|lg"] · .progress[data-variant="accent|success|warning|danger|auto"] · .progress[data-indeterminate] · .progress[data-striped] · .progress[data-animated] · .progress-fill · .progress-field · .progress-label · .progress-label-value · .progress-radial · .progress-radial-track · .progress-radial-fill · .progress-radial-label · .progress-radial[data-size="sm|md|lg"]

TypeScript

ProgressSizes · ProgressVariants · ProgressRadialSizes · type ProgressSize · type ProgressVariant · type ProgressRadialSize · interface ProgressStyleProps · interface ProgressRadialStyleProps

---

@vibe-labs/design-components-responsive

CSS: @import "@vibe-labs/design-components-responsive";Types: import type { ... } from "@vibe-labs/design-components-responsive/types";

Tokens

--responsive-grid-gap · --responsive-stack-gap

Classes

.responsive-container · .responsive-container[data-type="inline|size|normal"] · .responsive-container[data-name="main|sidebar|card|panel"] · .responsive-grid · .responsive-grid[data-cols="1–12"] · .responsive-grid[data-cols-xs|sm|md|lg|xl|2xl="1–12"] · .responsive-stack · .responsive-stack[data-breakpoint="xs|sm|md|lg|xl|2xl"]

TypeScript

Breakpoints · type Breakpoint · ContainerTypes · type ContainerType · ContainerNames · type ContainerName · GridColumns · type GridColumn · interface ResponsiveContainerStyleProps · interface ResponsiveGridStyleProps · interface ResponsiveStackStyleProps

---

@vibe-labs/design-components-sliders

CSS: @import "@vibe-labs/design-components-sliders";Types: import { ... } from "@vibe-labs/design-components-sliders/types";

Tokens

--slider-track-height-sm · --slider-track-height-md · --slider-track-height-lg · --slider-track-radius · --slider-track-bg · --slider-track-fill · --slider-track-fill-hover · --slider-track-border-width · --slider-track-border-color · --slider-thumb-size-sm · --slider-thumb-size-md · --slider-thumb-size-lg · --slider-thumb-bg · --slider-thumb-border-width · --slider-thumb-border-color · --slider-thumb-shadow · --slider-thumb-shadow-active · --slider-thumb-scale-hover · --slider-thumb-scale-active · --slider-thumb-transition · --slider-bar-width-sm|md|lg · --slider-bar-height-sm|md|lg · --slider-bar-radius · --slider-mark-size · --slider-mark-color · --slider-mark-color-active · --slider-mark-label-font-size · --slider-mark-label-color · --slider-mark-label-gap · --slider-tooltip-bg · --slider-tooltip-color · --slider-tooltip-font-size · --slider-tooltip-font-weight · --slider-tooltip-px · --slider-tooltip-py · --slider-tooltip-radius · --slider-tooltip-shadow · --slider-tooltip-offset

Classes

.slider · .slider[data-size="sm|md|lg"] · .slider[data-orientation="horizontal|vertical"] · .slider[data-disabled] · .slider[data-range] · .slider[data-tooltip="none|hover|always"] · .slider-track · .slider-track-fill · .slider-track-fill[data-color="accent|success|warning|danger"] · .slider-thumb · .slider-thumb[data-shape="circle|bar|pill|none"] · .slider-marks · .slider-mark · .slider-mark[data-active] · .slider-mark-label · .slider-tooltip · .slider-input

TypeScript

SliderSizes · SliderThumbShapes · SliderTrackColors · SliderTooltipModes · SliderOrientations · type SliderSize · type SliderThumbShape · type SliderTrackColor · type SliderTooltipMode · type SliderOrientation · interface SliderStyleProps · interface SliderTrackStyleProps · interface SliderTrackFillStyleProps · interface SliderThumbStyleProps · interface SliderMarkStyleProps · interface SliderMarkLabelStyleProps · interface SliderTooltipStyleProps

---

@vibe-labs/design-components-spinners

CSS: @import "@vibe-labs/design-components-spinners";Types: import { ... } from "@vibe-labs/design-components-spinners/types";

Tokens

--spinner-xs · --spinner-sm · --spinner-md · --spinner-lg · --spinner-xl · --spinner-width · --spinner-width-lg · --spinner-width-xl · --spinner-color · --spinner-track-color · --spinner-speed · --skeleton-base · --skeleton-highlight · --skeleton-radius · --skeleton-speed

Classes

.spinner · .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 · .skeleton · .skeleton[data-shape="text|heading|circle|rect"] · .skeleton[data-size="xs|sm|md|lg|xl"] · .skeleton[data-static]

TypeScript

SpinnerSizes · SpinnerColors · SkeletonShapes · SkeletonSizes · type SpinnerSize · type SpinnerColor · type SkeletonShape · type SkeletonSize · interface SpinnerStyleProps · interface SpinnerWrapStyleProps · interface SpinnerOverlayStyleProps · interface SkeletonStyleProps

---

@vibe-labs/design-components-tables

CSS: @import "@vibe-labs/design-components-tables";Types: import { ... } from "@vibe-labs/design-components-tables/types";

Tokens

--table-bg · --table-border-color · --table-border-width · --table-radius · --table-header-bg · --table-header-color · --table-header-font-size · --table-header-font-weight · --table-header-text-transform · --table-header-height-sm|md|lg · --table-header-px · --table-row-height-sm|md|lg · --table-row-px · --table-row-border-color · --table-row-bg · --table-row-bg-stripe · --table-row-hover-bg · --table-row-selected-bg · --table-row-selected-border · --table-cell-px · --table-cell-font-size-sm|md|lg · --table-cell-color · --table-sort-indicator-color · --table-sort-indicator-active-color · --table-sort-indicator-size · --table-empty-py · --table-empty-color · --table-empty-font-size · --table-footer-bg · --table-footer-border-color · --table-footer-px · --table-footer-py

Classes

.table · .table[data-variant="default|outlined|elevated|ghost"] · .table[data-size="sm|md|lg"] · .table[data-striped] · .table[data-hoverable] · .table[data-interactive] · .table[data-fixed-header] · .table[data-full] · .table-header · .table-header-cell · .table-header-cell[data-sortable] · .table-header-cell[data-sorted="asc|desc"] · .table-header-cell[data-align="left|center|right"] · .table-row · .table-row[data-selected] · .table-row[data-disabled] · .table-cell · .table-cell[data-align="left|center|right"] · .table-cell[data-truncate] · .table-cell[data-mono] · .table-cell[data-nowrap] · .table-empty · .table-footer · .table-footer[data-align="left|center|right|between"]

TypeScript

TableSizes · TableVariants · TableAlignments · TableSortDirections · type TableSize · type TableVariant · type TableAlignment · type TableSortDirection · interface TableColumn<T> · interface TableSortState · type TableRowKey<T> · interface TableStyleProps · interface TableHeaderStyleProps · interface TableHeaderCellStyleProps · interface TableRowStyleProps · interface TableCellStyleProps · interface TableEmptyStyleProps · interface TableFooterStyleProps

---

@vibe-labs/design-components-tabs

CSS: @import "@vibe-labs/design-components-tabs";Types: import { ... } from "@vibe-labs/design-components-tabs/types";

Tokens

--tabs-border-color · --tabs-border-width · --tabs-gap · --tab-height · --tab-px · --tab-font-size · --tab-font-weight · --tab-color · --tab-hover-color · --tab-hover-bg · --tab-active-color · --tab-active-font-weight · --tab-indicator-height · --tab-indicator-color · --tab-indicator-radius · --tab-pill-radius · --tab-pill-bg · --tab-pill-active-bg · --tab-pill-active-shadow · --tab-panel-padding

Classes

.tabs · .tabs[data-variant="pill"] · .tabs[data-scrollable] · .tabs[data-full] · .tab · .tab[aria-selected="true"] · .tab[disabled] · .tab-icon · .tab-badge · .tab-panel · .tab-panel[hidden]

TypeScript

TabsVariants · type TabsVariant · interface TabsStyleProps · interface TabStyleProps · interface TabIconStyleProps · interface TabBadgeStyleProps · interface TabPanelStyleProps

---

@vibe-labs/design-components-timeline

CSS: @import "@vibe-labs/design-components-timeline";Types: import { ... } from "@vibe-labs/design-components-timeline/types";

Tokens

--timeline-header-width · --timeline-min-height · --timeline-ruler-height · --timeline-track-height · --timeline-track-height-collapsed · --timeline-track-bg · --timeline-track-bg-alt · --timeline-track-border · --timeline-track-gap · --timeline-block-{variant}-bg · --timeline-block-{variant}-fg · --timeline-block-{variant}-border · --timeline-playhead-width · --timeline-playhead-color · --timeline-playhead-playing-color · --timeline-playhead-head-size · --timeline-transition-fast · --timeline-transition-normal

Classes

.timeline · .timeline[data-density="sparse|normal|dense|micro"] · .timeline[data-snap="beat|half|quarter|eighth|frame|free"] · .timeline[data-snapping] · .timeline[data-looping] · .timeline[data-playing] · .timeline-ruler · .timeline-track-group · .timeline-track-group[data-collapsed] · .timeline-track-group-label · .timeline-track · .timeline-track[data-kind="audio|dialogue|event|animation|control|master"] · .timeline-track[data-muted] · .timeline-track[data-solo] · .timeline-track[data-locked] · .timeline-track[data-collapsed] · .timeline-track-lane · .timeline-track-header · .timeline-track-header[data-muted|solo|locked] · .timeline-block · .timeline-block[data-variant="speech|sfx|music|gesture|expression|emotion|cue|generic"] · .timeline-block[data-emphasis="primary|secondary|muted"] · .timeline-block[data-selected|dragging|resizing|conflicting] · .timeline-block-label · .timeline-block-handle · .timeline-block-handle[data-edge="start|end"] · .timeline-marker · .timeline-marker[data-variant="cue|loop-start|loop-end|bookmark|warning"] · .timeline-marker[data-selected] · .timeline-playhead · .timeline-playhead[data-playing] · .timeline-grid · .timeline-waveform · .timeline-waveform[data-style="bars|mirror|line|filled"] · .timeline-selection · .timeline-selection[data-active]

TypeScript

TimelineTrackKinds · TimelineBlockVariants · TimelineBlockEmphases · TimelineSnapResolutions · TimelineZoomDensities · TimelineMarkerVariants · TimelineWaveformStyles · type TimelineTrackKind · type TimelineBlockVariant · type TimelineBlockEmphasis · type TimelineSnapResolution · type TimelineZoomDensity · type TimelineMarkerVariant · type TimelineWaveformStyle · interface TimelineStyleProps · interface TimelineRulerStyleProps · interface TimelineTrackGroupStyleProps · interface TimelineTrackStyleProps · interface TimelineTrackHeaderStyleProps · interface TimelineBlockStyleProps · interface TimelineMarkerStyleProps · interface TimelinePlayheadStyleProps · interface TimelineGridStyleProps · interface TimelineWaveformStyleProps · interface TimelineSelectionStyleProps

---

@vibe-labs/design-components-toasts

CSS: @import "@vibe-labs/design-components-toasts";Types: import { ... } from "@vibe-labs/design-components-toasts/types";

Tokens

--toast-max-width · --toast-min-width · --toast-padding-x · --toast-padding-y · --toast-gap · --toast-radius · --toast-bg · --toast-color · --toast-border-color · --toast-border-width · --toast-shadow · --toast-container-gap · --toast-container-inset · --toast-z

Classes

.toast · .toast[data-variant="success|warning|danger|info"] · .toast[data-entering] · .toast[data-exiting] · .toast-icon · .toast-content · .toast-title · .toast-description · .toast-actions · .toast-container · .toast-container[data-position="top-right|top-left|top-center|bottom-right|bottom-left|bottom-center"]

TypeScript

ToastVariants · ToastContainerPositions · type ToastVariant · type ToastContainerPosition · interface ToastStyleProps · interface ToastIconStyleProps · interface ToastContentStyleProps · interface ToastTitleStyleProps · interface ToastDescriptionStyleProps · interface ToastActionsStyleProps · interface ToastContainerStyleProps

---

@vibe-labs/design-components-toggles

CSS: @import "@vibe-labs/design-components-toggles";Types: import { ... } from "@vibe-labs/design-components-toggles/types";

Tokens

--toggle-width-sm · --toggle-width-md · --toggle-width-lg · --toggle-height-sm · --toggle-height-md · --toggle-height-lg · --toggle-radius · --toggle-bg · --toggle-bg-checked · --toggle-border-width · --toggle-border-color · --toggle-border-color-checked · --toggle-thumb-size-sm · --toggle-thumb-size-md · --toggle-thumb-size-lg · --toggle-thumb-color · --toggle-thumb-shadow · --toggle-thumb-inset

Classes

.toggle · .toggle[data-size="sm|md|lg"] · .toggle[data-disabled] · .toggle-thumb · .toggle-field

TypeScript

ToggleSizes · type ToggleSize · interface ToggleStyleProps · interface ToggleThumbStyleProps · interface ToggleFieldStyleProps

---

@vibe-labs/design-components-uploads

CSS: @import "@vibe-labs/design-components-uploads";Types: import { ... } from "@vibe-labs/design-components-uploads/types";

Tokens

--upload-zone-border-width · --upload-zone-border-style · --upload-zone-border-color · --upload-zone-border-color-active · --upload-zone-radius · --upload-zone-bg · --upload-zone-bg-active · --upload-zone-padding · --upload-zone-min-height · --upload-zone-color · --upload-zone-icon-size · --upload-list-gap · --upload-list-max-height · --upload-item-bg · --upload-item-border-color · --upload-item-border-width · --upload-item-radius · --upload-item-padding · --upload-item-gap · --upload-thumb-size · --upload-thumb-radius · --upload-status-queued · --upload-status-pending · --upload-status-uploading · --upload-status-complete · --upload-status-error · --upload-indicator-size · --upload-indicator-bg · --upload-indicator-border-color · --upload-indicator-radius · --upload-indicator-shadow

Classes

.upload-zone · .upload-zone[data-dragover] · .upload-zone[data-compact] · .upload-zone[data-disabled] · .upload-zone-icon · .upload-zone-label · .upload-zone-browse · .upload-zone-hint · .upload-list · .upload-list[data-unbounded] · .upload-item · .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-indicator · .upload-indicator[data-complete] · .upload-indicator[data-error] · .upload-indicator-spinner · .upload-indicator-progress

TypeScript

UploadItemStatuses · type UploadItemStatus · interface UploadZoneStyleProps · interface UploadZoneIconStyleProps · interface UploadZoneLabelStyleProps · interface UploadZoneBrowseStyleProps · interface UploadZoneHintStyleProps · interface UploadListStyleProps · interface UploadItemStyleProps · interface UploadItemThumbStyleProps · interface UploadItemContentStyleProps · interface UploadItemNameStyleProps · interface UploadItemMetaStyleProps · interface UploadItemTrailStyleProps · interface UploadItemRemoveStyleProps · interface UploadItemStatusIconStyleProps · interface UploadItemProgressStyleProps · interface UploadItemProgressFillStyleProps · interface UploadIndicatorStyleProps · interface UploadIndicatorSpinnerStyleProps · interface UploadIndicatorProgressStyleProps