Getting started

Installation

Add Sveltier to a Svelte 5 project. One package, no runtime dependencies, types included.

Requirements

Svelte 5.40 or newer. Sveltier uses runes, snippets and attachments only.
A Vite-based setup, such as SvelteKit or Vite with @sveltejs/vite-plugin-svelte. Component styles are plain CSS files imported by the components, which Vite bundles and tree-shakes.
A current browser. Colours use oklch() and color-mix(); styles live in cascade layers.

Install the package

pnpm

pnpm add sveltier

npm

npm install sveltier

yarn

yarn add sveltier

bun

bun add sveltier

What you get

UIProvider and the core: theming, defaults, shared props, breakpoints and locale.
Five theme packs: Monolith (the one to start with), Heritage, Aurora, Maison and Milano, each in light and dark.
Components, as they land, each with its own small stylesheet.
Full TypeScript types, including the props type of every component.

There is no global stylesheet to import. Each component imports its own CSS, and the root provider brings the design tokens and a minimal base. Everything sits in the sv.* cascade layers, so your own unlayered CSS always wins.

TypeScript

Types ship with the package. Theme packs are also available as subpath imports such as sveltier/themes/maison; use "moduleResolution": "bundler" (the SvelteKit and Vite default) so TypeScript resolves them.

AI coding agents

Point your agent at llms.txt, an index of these docs, or llms-full.txt: setup, conventions and every component's props, generated from the same types your editor checks.

Wrap your app in a provider in the quick start, then install the fonts of the theme you use.