Skip to content
DelightStack

Introduction

DelightStack is two products that share one design language:

  1. The component library (@delightstack/components) — 55 polished, accessible Svelte 5 components with thoughtful micro-animations and a complete design-token system. It drops into any Svelte 5 app and has no backend requirements.
  2. The backend packages — auth, reactive database, realtime, AI, billing, image processing, and rate limiting for Cloudflare Workers, built on Durable Objects. They’re designed to work together and with the components, but each stands on its own.

You can adopt either half without the other. Most people start with the components; teams building on Cloudflare get a full-stack toolkit.

Choose your path

Section titled “Choose your path”

Design philosophy

Section titled “Design philosophy”
  • Details Matter — Every pixel, every transition, every interaction is intentional.
  • Delight Users — Subtle animations, smooth transitions, and unexpected moments of joy.
  • Opinionated by Default — Everything looks and works great out of the box with sensible defaults.
  • Modern Platform — Plain CSS with custom properties, light-dark(), and container queries on the frontend; SQLite-backed Durable Objects at the edge on the backend. No heavy abstractions.
  • One Error, One Convention — A single DelightError class, snake_case data, camelCase callbacks, and Svelte 5 runes throughout.

The component library

Section titled “The component library”

Svelte 5 Native

Built from the ground up with runes ($props, $state, $derived, $effect), snippets, and the {@attach} directive. No legacy compatibility layers.

55 Components

Everything you need — buttons, modals, forms, tables, charts, maps, video players, and more.

Dark Mode Built-in

Every component supports light and dark mode via CSS light-dark(). No JavaScript theme switching required.

Accessible

ARIA attributes, keyboard navigation, focus management, and prefers-reduced-motion support baked into every component.

Design System Included

A complete set of CSS custom properties for colors, typography, spacing, shadows, and animations — fully customizable.

Type-Safe

Full TypeScript support with exported types for all component props, events, and data structures.

All 55 components — across Actions, Display, Feedback, Form, Media, and Navigation — import from a single entry point:

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


<Button onclick={() => console.log('clicked!')}>
  Click Me
</Button>

Components use callback props (onclick, onchange) instead of dispatched events, support two-way binding via bind:value, and automatically show loading states when callbacks return Promises. Browse the full catalog in the component reference, or see them all working together in the Dashboard Demo.

The backend packages

Section titled “The backend packages”

Each package’s server runs inside a Durable Object — one instance per tenant, single-writer, with transactional SQLite storage. There’s no external database, queue, or cache to provision; everything runs on Cloudflare’s network, close to your users.

Auth JWT sessions, Argon2id, OAuth, magic links, multi-org, invitations, and SvelteKit route guards.
Database Type-safe reactive SQLite with full-text + vector search, Zod validation, and automatic migrations.
Realtime Room-scoped WebSockets with reactive presence, typed events, and live database sync.
AI Chat completions, resumable streaming, and vector embeddings via Cloudflare AI Gateway.
Billing Stripe subscriptions, metered usage, webhooks, and subscription guards.
Images Variants, ThumbHash, EXIF, color extraction, and face-aware crops via Cloudflare Containers.
Rate Limiter Token-bucket rate limiting as a Durable Object, with zero runtime dependencies.

Most packages ship a reactive Svelte 5 client ($state/$derived with optimistic updates) and a create*Handle() that plugs straight into SvelteKit’s handle hook. The Architecture page explains how the pieces are wired together.

Next steps

Section titled “Next steps”