SvelteKit UI

SvelteKit UI is a Svelte 5 component library built around paired components and reactive manager functions. It supports SvelteKit 2 and 3 applications.

The component documentation and interactive examples live at sveltekit-ui.com.

Install

npm install sveltekit-ui

Import the shared styles once in your root layout:

<script>
  import "sveltekit-ui/style.css"
  import { Button, create_button_manager } from "sveltekit-ui"

  const button = create_button_manager({
    text: "Save",
    on_click: () => console.log("saved"),
  })
</script>

<Button manager={button} />

Most interactive components expose a create_*_manager function. The manager owns state and behavior; the Svelte component renders that manager. Components that depend on browser APIs should be initialized or used in the browser, while imports remain safe during SvelteKit server rendering.

Starter project

To create a new site using the library:

npx create-sveltekit-ui-site my-project

Development

npm install
npm run dev

Copy .env.example to .env and provide PUBLIC_APPLE_MAPKIT_JS_API_KEY if you want to run the MapKit showcases locally.

The package and documentation app require Node.js 24 or newer. The documentation app uses SvelteKit 3 and TypeScript 6, even when writing JavaScript. The .ncurc.js configuration updates development and runtime dependencies while respecting peer dependencies and the current Node engine. TypeScript 7 is held until SvelteKit and svelte-check support it. Analytics remains pinned until a compatible stable release supports SvelteKit 3.

Before publishing, run the complete verification suite:

npm run verify

This checks the Svelte source, runs tests, generates and verifies the distributable package, and builds the documentation site.

To verify a packed release in clean SvelteKit 2 and 3 consumers, run node scripts/verify-kit-consumers.js /absolute/path/to/sveltekit-ui.tgz. The consumers install their dependencies with normal peer validation, then compile the public components for server and browser use and check server-rendered pages.

Publish with npm run publish:npm. It checks npm for the newest published release, selects the next patch version when needed, keeps package.json and package-lock.json in sync, and runs verification before publishing. A prepared version that is newer than the published releases is reused, so retrying a failed publish does not skip another version.

Preview the version without changing files or publishing:

npm run version:available -- --dry-run

Compatibility and releases

• Svelte 5 is required.
• SvelteKit 2.22.2 or newer, or SvelteKit 3, is required because some components use SvelteKit navigation modules.
• Browser flags use esm-env. Source #lib imports are rewritten to relative imports in the published package; consumers do not need to configure the library's source alias.
• Public API changes are documented with package releases. Consumers should review release notes before adopting a new minor version.

The experimental Contibase code generator is available at contibase.com/code_generator.