LyEve UI kit

The design system behind LyEve

The kit holds 88 Svelte 5 components that share one stylesheet and two themes, dark and light. LyEve Console and lyeve.com use them.

What you get

Written for Svelte 5

Props arrive through runes and content through snippets. No component uses export let, a $: block or a slot.
Two themes, one set of tokens

Every color is a CSS variable. Dark is the default, and data-theme="light" on the html element turns the page light.
Tokens you can use too

The theme is declared for Tailwind CSS v4, so bg-surface, text-brand and duration-base work in your own markup.
Sized for touch

Under a touch screen the controls grow to a 44 pixel target. A mouse keeps the compact 38 pixel rows.

Forms, layout, navigation, overlays and feedback. Each page shows the component live, the code behind it and every prop it takes.

Install the package, import its stylesheet once and render a component. The guide walks through a SvelteKit project on Tailwind CSS v4.