Installation

This page covers installing the component library into a Svelte 5 app. To set up the Cloudflare backend packages instead, start with Quick Start: Full Stack.

Prerequisites

DelightStack requires Svelte 5 (^5.36.0). It works with:

• SvelteKit — the recommended framework for Svelte apps
• Vite + Svelte — for standalone Svelte projects

Install the Package

1. Add the component library to your project:

   pnpm add @delightstack/components

   Note

   The @delightstack/utilities package is included automatically as a dependency — you do not need to install it separately.

2. Add the design tokens:

   Components read all their colors, typography, spacing, and motion from CSS custom properties shipped by @delightstack/styles. Install it and import it once at the root of your app:

   pnpm add @delightstack/styles

   // e.g. src/routes/+layout.svelte (SvelteKit) or your app entry
   import '@delightstack/styles';

   This defines every token — each with light and dark values built in — plus a small set of base element styles. To re-theme, override the brand seed (which re-derives the action/accent colors and the neutral ramp) or any individual token in your own CSS:

   :root {
     /* Re-derives the whole palette from one brand color */
     --color-primary: #2563eb;
   
     /* …or override individual semantic tokens outright */
     --color-action: light-dark(#2563eb, #3b82f6);
     --radius-md: 0.5rem;
   }

   Tip

   Need the tokens but not the base element styles (e.g. inside an existing design system)? Import @delightstack/styles/tokens.css instead. See the Design Tokens reference for the complete list.

3. Start using components:

   <script>
     import { Button } from '@delightstack/components';
   </script>
   
   <Button onclick={() => alert('It works!')}>
     Hello, DelightStack
   </Button>

Optional Peer Dependencies

Some components require additional libraries that are not bundled with DelightStack. Install them only if you use the corresponding component:

Component	Peer Dependency	Install Command
Panorama	three	pnpm add three
PDF	pdfjs-dist	pnpm add pdfjs-dist

These are loaded dynamically at runtime, so they will not affect your bundle size unless you actually use the component.

TypeScript

TypeScript types are included automatically — no additional @types/* packages or configuration needed. The library exports types for all component props, event details, and data structures:

import type {
  SelectOption,
  TableColumn,
  TreeNode,
  GalleryImage,
  CommandOption,
  CalendarEvent,
} from '@delightstack/components';

Next Steps

• Quick Start: Components — Build a complete form example
• Design Tokens — Full reference of CSS custom properties
• Theming — Customize the look and feel