Tavlean
Theme

Slift UI

A dependency-free Svelte 5 component library

npm

Overview

Slift UI is a Svelte 5 component library with no runtime dependencies. Every component is built on plain DOM and the native browser APIs, so it renders and hydrates cleanly on prerendered and server-rendered pages, with no custom elements or shadow DOM. It is published as @slift/ui and needs Svelte 5.16 or newer.

Install

Add the package, then import the component and pass it a value.

npm i @slift/ui
import { NumberRoll } from '@slift/ui'

<NumberRoll value={count} />

NumberRoll

The first component is an animated, odometer-style number. Each digit place is a vertical strip that rolls to its new value with a CSS transform transition.

  • Every digit rolls in the direction the whole number moved, wrapping 9 to 0 like a real odometer, rather than each digit taking its own shortest path.
  • The top and bottom edges are softly masked so digits fade at the boundary.
  • Formatting goes through Intl.NumberFormat, so decimals, grouping, and currency all work.
  • It inherits font size, weight, and color from its parent.
  • It respects prefers-reduced-motion.

Approach

The library grows one component at a time, each one finished before the next. Components are meant to be small enough to read, own, and edit, with no heavy abstractions and nothing pulled in that you would not have written yourself.