Svelte 5 · v0.2.2

Components that get out of your way.

A focused Svelte 5 component library with accessible primitives, sensible defaults, and tokens you can bend to your brand.

No runtime dependencies beyond Svelte. MIT licensed.

Button.svelte

Notifications on

The set

Six pieces. One visual language.

Enough to build a real interface, small enough to understand at a glance. Every component shares the same radius, spacing, and accent tokens.

Solid, tonal, outlined, and quiet actions with a shared set of tokens.

Inline links and button-styled anchors, with an external-link icon built in.

A fixed, sticky, or static navigation bar with optional blur.

A compact checkbox switch that stays keyboard and screen-reader friendly.

Pointer-aware tooltips that stay inside the viewport and follow focus.

Accessible dialogs with focus trapping, scroll locking, and edge sheets.

Under the hood

The details that usually get skipped are the ones that make a component library feel finished.

Runes, snippets, and bindable props are used where they make the component simpler.

Every surface reads from CSS variables, so your brand can replace the defaults without fighting selectors.

Dialogs trap focus and inert the background. Toggles keep native input semantics. Icons stay out of the accessibility tree.

A tight set of primitives instead of a framework. Import only what you render.

Install

Add the package, import the tokens once, and start composing.

bun

add velne-lib

import { Button } from 'velne-lib';
import 'velne-lib/tokens.css';

<Button variant="solid">Save changes</Button>