Component Overview

DelightStack includes 55 components across 6 categories. All components are available from a single import:

<script>
  import { Button, Input, Modal, Table } from '@delightstack/components';
</script>

Actions

Interactive elements that trigger behaviors.

Component	Description
Button	Versatile button with ripple effects, loading states, and variants
ButtonGroup	Connected button container with shared borders
Modal	Dialog overlay with transitions and focus management
Alert	Confirmation dialog built on Modal
Popover	Floating content with smart positioning
ContextMenu	Right-click menu system
Portal	Render children in different DOM locations
CommandPalette	Keyboard-driven command interface
ThemeToggle	Light/dark/auto theme switcher

Display

Components for presenting information.

Component	Description
Accordion	Collapsible content sections
Avatar	User/entity profile image
AvatarGroup	Stacked overlapping avatars
Calendar	Date display and selection
Chart	Data visualization (line, bar, area, pie, donut)
Code	Syntax-highlighted code block
Comparison	Before/after image slider
Counter	Animated number display
Expand	Animated show/hide container
List	Flexible list container with selection modes
ListItem	Rich list item with multiple interaction types
QR	QR code generator
SplitPane	Resizable split view
Stat	Key metric display
Table	Data table with sorting and filtering
Timeline	Chronological event display
Tree	Hierarchical data display
Typewriter	Animated text typing effect

Feedback

Components that communicate state and progress.

Component	Description
Callout	Highlighted information block (inline and banner mode)
Confetti	Celebration animation
Progress	Progress bar, spinner, and loading indicator
Toaster	Temporary notification messages

Form

Input components for user data entry.

Component	Description
Input	Comprehensive text/data input field
Checkbox	Boolean toggle with check mark
Fieldset	Form section grouping
FileUpload	Drag-and-drop file input
Form	Form container with Standard Schema validation
Radio	Single-select option
Range	Slider input
Rating	Star/score input
Select	Dropdown selection
Toggle	On/off switch, with an optional three-state (indeterminate) mode

Media

Components for rich media content.

Component	Description
Carousel	Swipeable image/content slider
Gallery	Image grid with lightbox
Image	Optimized image with loading states
Panorama	360-degree image viewer (requires three)
PDF	PDF document viewer (requires pdfjs-dist)
Video	Video player with controls

Navigation

Components for moving through the application.

Component	Description
BottomSheet	Mobile-style slide-up panel
Breadcrumbs	Hierarchical navigation trail
Pagination	Page navigation controls
Steps	Multi-step progress indicator
Tabs	Tabbed content switcher

Common Patterns

Size System

Components use a numeric size scale where '1' is the default:

<Button size="0">Small</Button>
<Button>Normal</Button>
<Button size="3">Large</Button>

Variant Booleans

Visual variants are expressed as boolean props. They can be combined:

<Button outline>Outlined</Button>
<Button transparent>Ghost</Button>
<Button outline accent>Accent Outlined</Button>

Density

Where appropriate, components support dense and comfortable props:

<List dense>Tight spacing</List>
<List>Default spacing</List>
<List comfortable>Relaxed spacing</List>

Cross-Cutting Props

Several props appear across many components:

Prop	Type	Description
skeleton	boolean	Shows a loading shimmer placeholder
tooltip	string	Hover tooltip text
badge	number | boolean	Notification badge (true = dot, number = count)

Async Callbacks

When an onclick or onsubmit callback returns a Promise, the component automatically manages a loading state:

<Button onclick={async () => {
  await saveData();
}}>
  Save
</Button>

Exported Types

The library exports TypeScript types for component data structures:

import type {
  // Actions
  ButtonGroupContext,
  CommandOption,

  // Display
  AvatarData,
  CalendarEvent,
  MarkedDate,
  ChartData,
  ChartDataset,
  TableColumn,
  TreeNode,
  FlatTreeNode,

  // Feedback
  ConfettiOptions,
  ToastOptions,

  // Form
  FormContext,
  StandardSchema,
  InputType,
  InputOption,
  SelectOption,

  // Media
  GalleryImage,
  PanoramaHotspot,
  PDFAnnotation,
  VideoSource,
  VideoTrack,

  // Navigation
  BreadcrumbItem,
  MenuContext,
  TabsContext,
} from '@delightstack/components';

Imperative APIs

Some components export functions alongside their default component export:

Export	From Component	Description
toast	Toaster	toast.success(), toast.error(), toast.info(), toast.warning()
alert	Alert	Programmatic confirmation dialogs
confetti	Confetti	Trigger confetti animations
contextMenu	ContextMenu	Programmatic context menu
portal	Portal	Portal action for use with {@attach}