Getting started

Introduction

The LyEve UI kit is the set of Svelte 5 components LyEve Console and lyeve.com use. It is published as @lyeve-labs/ui-kit under the MIT license, and this site documents version 0.60.1.

What the kit includes

• 88 components: forms, layout, navigation, overlays, feedback, checkout and media, and a theme toggle.
• Two themes: Soft Dark, the default, and Soft Light. One attribute on <html> switches between them.
• One stylesheet: import @lyeve-labs/ui-kit/styles.css and the tokens become Tailwind utilities you can use in your own markup.
• Server rendering: every component renders on the server. Every page of this site is prerendered that way.

Design principles

The kit holds to five rules:

1. One source for every color. No component writes a hex value. Every color comes from a token in the stylesheet, so overriding a token changes every component that uses it.
2. Snippets over slots. All composition uses Svelte 5 snippets, typed end to end.
3. No surprises in the markup. If a button looks like a button in the preview, it is a real <button> in the page.
4. Accessibility is a build-time check. The kit's build fails on any accessibility warning the Svelte compiler raises, and so does this site's.
5. Small surface area. A component does one thing and takes only the props that thing needs.

A first component

<script lang="ts">
  import { Button, Card, Toaster, toast } from '@lyeve-labs/ui-kit';
</script>

<Card title="Welcome">
  <p>The card, the button and the toast all follow the theme.</p>
  <Button onclick={() => toast.success('Saved.')}>Save</Button>
</Card>

<Toaster />

Where to next

• Installation

  Add the package, import the stylesheet and render your first component.

  Install

• Theming

  The tokens, the dark and light themes, and how to bring the kit to your own brand.

  Theming