# DelightStack

> DelightStack is a Svelte 5 component library (@delightstack/components, 50+ accessible,
> themeable components) plus a Cloudflare-native backend stack (auth, database, realtime,
> AI, billing, images) for building delightful apps.

Every docs page is available as plain markdown by appending `.md` to its URL.
Key conventions: components import from `@delightstack/components`; props are snake_case,
callbacks are camelCase; design tokens come from `@delightstack/styles`.

- [Agent skill / AGENTS.md snippet](https://docs.thedelight.co/skill.md): compact instructions for AI coding agents
- [Full documentation in one file](https://docs.thedelight.co/llms-full.txt)
- [Component Overview](https://docs.thedelight.co/components/overview.md): Browse all 55 DelightStack components organized by category.

## Getting Started

- [Architecture](https://docs.thedelight.co/getting-started/architecture.md): The Cloudflare Workers + Durable Objects topology the backend packages run on — DO classes, bindings, migrations, and the two-worker model.
- [Installation](https://docs.thedelight.co/getting-started/installation.md): How to install and configure @delightstack/components in your Svelte 5 project.
- [Introduction](https://docs.thedelight.co/getting-started/introduction.md): What DelightStack is — a polished Svelte 5 component library and an edge-native Cloudflare backend — and how to choose your starting point.
- [Quick Start: Components](https://docs.thedelight.co/getting-started/quick-start.md): Build your first form with DelightStack components in minutes.
- [Quick Start: Full Stack](https://docs.thedelight.co/getting-started/quick-start-stack.md): Run the DelightStack example app — a full-stack SvelteKit + Cloudflare app wiring every backend package together.

## Packages (Cloudflare backend)

- [AI](https://docs.thedelight.co/packages/ai.md): Chat completions, resumable streaming, and vector embeddings via Cloudflare AI Gateway, with database + WebSocket integration.
- [Auth](https://docs.thedelight.co/packages/auth.md): Full-stack authentication for SvelteKit on Cloudflare Workers — JWT sessions, Argon2id, OAuth, magic links, multi-org, and route guards.
- [Database](https://docs.thedelight.co/packages/database.md): Type-safe reactive SQLite on Cloudflare Durable Objects, with full-text + vector search, Zod validation, and automatic migrations.
- [Editor](https://docs.thedelight.co/packages/editor.md): A delightful rich text / block editor for Svelte 5 built on ProseMirror — slash commands, drag & drop blocks, magnetic resize, optimistic uploads, and an extensible block system.
- [Images](https://docs.thedelight.co/packages/images.md): Cloudflare Container–based image processing — optimized variants, ThumbHash placeholders, EXIF, color extraction, and face-aware crops.
- [Packages Overview](https://docs.thedelight.co/packages/overview.md): DelightStack's edge-native backend packages for Cloudflare Workers — auth, database, realtime, AI, billing, and images, built on Durable Objects.
- [Presence](https://docs.thedelight.co/packages/presence.md): Real-time presence for Svelte 5 — online roster, live cursors, cursor chat, reactions, and field presence, on a swappable transport and identity.
- [Rate Limiter](https://docs.thedelight.co/packages/rate-limiter.md): Token-bucket rate limiting for Cloudflare Workers as a Durable Object, with zero runtime dependencies.
- [Billing (Stripe)](https://docs.thedelight.co/packages/stripe.md): Stripe billing for Cloudflare Workers and SvelteKit — products, subscriptions, metered usage, webhooks, and subscription guards.
- [Realtime (WebSocket)](https://docs.thedelight.co/packages/websocket.md): Room-scoped realtime for SvelteKit on Cloudflare — reactive presence, typed events, hibernation, and live database sync.

## Guides

- [Accessibility](https://docs.thedelight.co/guides/accessibility.md): Built-in accessibility features in DelightStack components and best practices for building inclusive interfaces.
- [AI Agents](https://docs.thedelight.co/guides/ai-agents.md): Set up Claude Code, Cursor, and other AI coding agents to use DelightStack components correctly — markdown docs, llms.txt, and a ready-made agent skill.
- [Dark Mode](https://docs.thedelight.co/guides/dark-mode.md): How dark mode works in DelightStack and how to set it up in your application.
- [Design Tokens](https://docs.thedelight.co/guides/design-tokens.md): Complete reference of all CSS custom properties used by DelightStack components.
- [Working with Forms](https://docs.thedelight.co/guides/forms.md): How to build validated forms with the Form component using Standard Schema validators like Zod, Valibot, and ArkType.
- [Scrolling](https://docs.thedelight.co/guides/scrolling.md): How DelightStack styles scrollbars — the token-driven native baseline, the overlay scrollbar attachment, and the touch-device policy.
- [Theming](https://docs.thedelight.co/guides/theming.md): Customize the look and feel of DelightStack by overriding CSS custom properties.

## Components: Actions

- [Alert](https://docs.thedelight.co/components/actions/alert.md): A streamlined confirmation dialog built on Modal, providing consistent yes/no decision flows with a programmatic API.
- [Button](https://docs.thedelight.co/components/actions/button.md): A versatile, polished button with ripple effects, promise-aware loading states, dropdown menus, and confirmation flows.
- [ButtonGroup](https://docs.thedelight.co/components/actions/button-group.md): A container that groups related buttons with shared borders, coordinated styling, and context-driven prop inheritance.
- [CommandPalette](https://docs.thedelight.co/components/actions/command-palette.md): A keyboard-driven command interface with fuzzy search, recent commands tracking, category grouping, and match highlighting.
- [ContextMenu](https://docs.thedelight.co/components/actions/context-menu.md): A right-click context menu system using the {@attach contextMenu()} Svelte attachment API with Popover-based positioning and List rendering.
- [Modal](https://docs.thedelight.co/components/actions/modal.md): A polished dialog overlay with smooth animations, focus trapping, backdrop blur, and crossfade transitions.
- [Popover](https://docs.thedelight.co/components/actions/popover.md): A floating content container with smart Floating UI positioning, multiple trigger modes, focus trapping, and hover trapezoid for safe diagonal mouse movement.
- [Portal](https://docs.thedelight.co/components/actions/portal.md): A utility component that renders children in a different DOM location, escaping parent overflow and stacking contexts.
- [ThemeToggle](https://docs.thedelight.co/components/actions/theme-toggle.md): A theme switcher that cycles between light, dark, and auto modes with animated sun-to-moon icon morphing and localStorage persistence.

## Components: Display

- [Accordion](https://docs.thedelight.co/components/display/accordion.md): A vertically stacked set of collapsible sections built on semantic details/summary elements with smooth animations.
- [Avatar](https://docs.thedelight.co/components/display/avatar.md): A profile image component with initials fallback, status indicators, and deterministic OKLCH color generation.
- [AvatarGroup](https://docs.thedelight.co/components/display/avatar-group.md): A stacked group of overlapping avatars with overflow indicator, commonly used to show participants.
- [Calendar](https://docs.thedelight.co/components/display/calendar.md): A full-featured date display and selection component with single, range, and multiple selection modes.
- [Chart](https://docs.thedelight.co/components/display/chart.md): A data visualization component supporting line, area, bar, horizontal bar, pie, and donut chart types.
- [Code](https://docs.thedelight.co/components/display/code.md): A syntax-highlighted code block with line numbers, copy-to-clipboard, line highlighting, and diff display.
- [Comparison](https://docs.thedelight.co/components/display/comparison.md): An interactive before/after image comparison slider using CSS clip-path for the reveal effect.
- [Counter](https://docs.thedelight.co/components/display/counter.md): An animated number display that counts up or down with IntersectionObserver-triggered animation and locale-aware formatting.
- [Expand](https://docs.thedelight.co/components/display/expand.md): A smooth animated container that expands and collapses content using CSS Grid height animation.
- [List](https://docs.thedelight.co/components/display/list.md): A flexible container for list items with selection handling, multiple interaction modes, and consistent styling.
- [ListItem](https://docs.thedelight.co/components/display/list-item.md): A versatile list item that adapts to its parent List context, supporting buttons, radios, checkboxes, async click handling, and submenu support.
- [QR](https://docs.thedelight.co/components/display/qr.md): A QR code generator component that renders scannable codes as crisp SVGs with customizable colors, logo overlay, and download support.
- [SplitPane](https://docs.thedelight.co/components/display/split-pane.md): A resizable split view container that divides space between two panes with drag, keyboard, snap, and collapse support.
- [Stat](https://docs.thedelight.co/components/display/stat.md): A component for displaying key metrics with optional labels, icons, change indicators, and animated number display.
- [Table](https://docs.thedelight.co/components/display/table.md): A full-featured data table with sorting, pagination, row selection, inline cell editing, custom cell rendering, column resizing, row grouping, expandable rows, and CSV/JSON export.
- [Timeline](https://docs.thedelight.co/components/display/timeline.md): A chronological event display for vertical or horizontal timelines with scroll-reveal animations, status markers, and on-demand loading.
- [Tree](https://docs.thedelight.co/components/display/tree.md): A hierarchical data display component for folder structures and nested data with expand/collapse, checkboxes, drag-and-drop, lazy loading, and search filtering.
- [Typewriter](https://docs.thedelight.co/components/display/typewriter.md): An animated text component that simulates character-by-character typing with natural variation, smart punctuation pauses, and text cycling.

## Components: Feedback

- [Callout](https://docs.thedelight.co/components/feedback/callout.md): A highlighted information block for drawing attention to important content, supporting inline callouts and full-width banners.
- [Confetti](https://docs.thedelight.co/components/feedback/confetti.md): A canvas-based celebration animation with both a programmatic API and a declarative component for firing confetti particles.
- [Progress](https://docs.thedelight.co/components/feedback/progress.md): A unified progress and loading indicator component supporting circular spinners, linear bars, overlays, and fullscreen loading states.
- [Toast](https://docs.thedelight.co/components/feedback/toast.md): Non-blocking toast notifications created programmatically via the toast() function and rendered by a Toaster container component.

## Components: Form

- [Checkbox](https://docs.thedelight.co/components/form/checkbox.md): A styled checkbox input with animated SVG checkmark, indeterminate state support, and an optional CheckboxGroup for managing multiple selections.
- [Fieldset](https://docs.thedelight.co/components/form/fieldset.md): A semantic grouping component for related form fields with optional border, grid layout, and collapsible sections.
- [FileUpload](https://docs.thedelight.co/components/form/file-upload.md): A file upload component with drag-and-drop support, image previews, and three visual variants -- dropzone, compact, and avatar.
- [Form](https://docs.thedelight.co/components/form/form.md): A form container with Standard Schema validation, promise-aware submission, auto-focus on errors, and context-based state management for child form controls.
- [Input](https://docs.thedelight.co/components/form/input.md): A comprehensive form input component supporting 13 input types, floating labels, autocomplete, chips mode, password strength, input masking, and Form context integration.
- [Radio](https://docs.thedelight.co/components/form/radio.md): A styled radio button for single-selection with dot scale animation, supporting standalone use or coordinated groups via RadioGroup.
- [Range](https://docs.thedelight.co/components/form/range.md): A slider input for selecting a value or range, with support for two-thumb range mode, tick marks, custom labels, and value tooltips.
- [Rating](https://docs.thedelight.co/components/form/rating.md): A star rating input for collecting user ratings or displaying scores, with half-star precision, custom icons, and a read-only display mode.
- [Select](https://docs.thedelight.co/components/form/select.md): A dropdown selection component with search, multi-select with chips, option groups, async loading, creatable mode, and virtual scrolling for large lists.
- [Toggle](https://docs.thedelight.co/components/form/toggle.md): An on/off switch component for binary choices with slide animation, bounce physics, optional thumb icon, and an optional three-state indeterminate mode.

## Components: Media

- [Carousel](https://docs.thedelight.co/components/media/carousel.md): The low-level media viewport that powers Gallery's modal — handles swipe, pinch-zoom, mouse-wheel pan, page transitions, and PDF/video/embed item types.
- [Gallery](https://docs.thedelight.co/components/media/gallery.md): A media gallery with seven display modes — masonry, justified rows, uniform grid, list, inline slider, autoplay slideshow, and a headless lightbox for custom thumbnail layouts.
- [Image](https://docs.thedelight.co/components/media/image.md): An optimized image component with lazy loading, blur-up placeholder transitions, skeleton shimmer, and error fallback handling.
- [Panorama](https://docs.thedelight.co/components/media/panorama.md): A 360-degree panorama viewer powered by Three.js with drag, pinch-zoom, gyroscope control, interactive hotspots, and auto-rotation.
- [PDF](https://docs.thedelight.co/components/media/pdf.md): A full-featured PDF viewer with toolbar controls, virtualized page rendering, text search, zoom, annotations, and keyboard shortcuts.
- [Video](https://docs.thedelight.co/components/media/video.md): A custom video player with playback controls, quality switching, captions, picture-in-picture, fullscreen, and keyboard shortcuts.

## Components: Navigation

- [BottomSheet](https://docs.thedelight.co/components/navigation/bottom-sheet.md): A mobile-first slide-up panel with configurable snap points, spring-physics gestures, a morphing header, pull-to-dismiss, and scroll-aware drag behavior.
- [Breadcrumbs](https://docs.thedelight.co/components/navigation/breadcrumbs.md): A navigation trail with automatic home icon, SSR-safe auto-collapsing, Schema.org structured data, and customizable separators.
- [Pagination](https://docs.thedelight.co/components/navigation/pagination.md): A page navigation control with ellipsis algorithm, simple/compact display modes, page size selector, and item range info.
- [Steps](https://docs.thedelight.co/components/navigation/steps.md): A multi-step progress indicator with horizontal and vertical layouts, clickable navigation, wizard mode with step content, and error states.
- [Tabs](https://docs.thedelight.co/components/navigation/tabs.md): A tabbed navigation component with a spring-loaded sliding indicator, visual variants (underline, pills, boxed/segmented), horizontal and vertical orientations, ripple feedback, and optional fade/slide content transitions.