@lyeve-labs/ui-kit
v0.24.0
Published
A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.
Maintainers
lyeveReadme
@lyeve-labs/ui-kit
A clean, accessible Svelte 5 component library. The design system behind LyEve.
pnpm add @lyeve-labs/ui-kit @lucide/svelte<script lang="ts">
import { Button, Card, toast } from '@lyeve-labs/ui-kit';
import '@lyeve-labs/ui-kit/styles.css';
</script>
<Card title="Welcome">
<p>Three lines from a clean dark dashboard.</p>
<Button onclick={() => toast.success('Hello, world!')}>Try it</Button>
</Card>No config file, no theme provider, no setup ceremony.
What's in the box
- 67 components: buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
- Two themes: Soft Dark (default) and Soft Light, switched by a single
data-themeattribute on<html>. - One CSS file:
@lyeve-labs/ui-kit/styles.cssdeclares every token; the rest is just Tailwind. - Svelte 5 native: built on runes and snippets, fully typed end-to-end.
- No surprises: a
<Button />is a<button>, an<Input />is an<input>. Markup matches the preview.
Component list
Layout and structure Card, Panel, AppShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView
Forms and inputs Button, ButtonGroup, Input, PasswordInput, Textarea, NumberInput, SearchInput, FileInput, Label, Field, FormMessage, SegmentedControl, Select, MultiSelect, Autocomplete, DatePicker, TimePicker, DateTimePicker, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle
Navigation Breadcrumb, Tabs, Pagination, StepIndicator, Dropdown, SidebarNav, AccountMenu
Overlays Modal, Drawer, Tooltip
Dialogs
Dialog, DialogContainer, ConfirmDialog (plus the openDialog and confirm services)
Feedback and status Alert, Banner, Badge, Tag, Indicator, Progress, Spinner, Skeleton, EmptyState, Stat, Kbd, CopyButton
Media Avatar, AvatarGroup, Logo
Theming
ThemeToggle, Toaster (plus the toast service)
Requirements
- Svelte 5.0 or newer
- Tailwind CSS v4 with the
@tailwindcss/viteplugin @lucide/svelte0.511 or newer, below 2.0- Node 20 or newer
Install
pnpm add @lyeve-labs/ui-kit @lucide/svelte
# or npm install @lyeve-labs/ui-kit @lucide/svelte
# or yarn add @lyeve-labs/ui-kit @lucide/svelteThe icon set is a peer dependency, so it installs once and the application picks the version. Most applications already depend on it directly, and while the kit owned a copy of its own they resolved two: the same icons shipped twice in the bundle and an upgrade on the application's side moved only one of them. A missing peer is resolved for you by pnpm and by npm, and not by yarn.
If you don't have Tailwind v4 yet:
pnpm add -D tailwindcss @tailwindcss/vite// vite.config.ts
import { sveltekit } from '@sveltejs/vite-plugin-svelte';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()],
});Use
Import the stylesheet once at the top of your app's CSS entry:
/* src/app.css */
@import '@lyeve-labs/ui-kit/styles.css';Then drop components into your routes:
<script lang="ts">
import { Button, Card, Toaster, toast } from '@lyeve-labs/ui-kit';
</script>
<Card title="Profile" description="Update your details.">
<Button onclick={() => toast.success('Saved.')}>Save</Button>
</Card>
<Toaster />Mount the <Toaster /> component in your root layout to surface toast notifications.
See src/lib/components/Toaster.svelte for the full prop list.
Theming
Two themes ship out of the box. Switch with one attribute:
<html data-theme="light">
<!-- light mode -->
</html>
<html>
<!-- dark mode (default) -->
</html>Or use the helpers:
import { setTheme, toggleTheme, getTheme } from '@lyeve-labs/ui-kit';
setTheme('light');
toggleTheme(); // returns the new theme
getTheme(); // 'dark' | 'light'Avoid the flash-of-wrong-theme by adding the boot script to your app.html.
Import themeBootScript from @lyeve-labs/ui-kit and inline it in <head> before any
stylesheets.
Want to bend the palette to your own brand? Override individual tokens after the import:
@import '@lyeve-labs/ui-kit/styles.css';
@theme {
--color-brand: #ff5e9c;
--color-brand-light: #ff85b3;
}Local development
pnpm install # install dependencies
pnpm test # run unit tests
pnpm check # type-check + svelte-check
pnpm build # svelte-package + publint → dist/The documentation site lives in its own repo (lyeve-labs/ui-kit-docs).
This repo is a single-purpose component library. Nothing but src/lib/.
Project layout
src/
└── lib/ # → published as @lyeve-labs/ui-kit
├── components/ # 67 .svelte files
├── stores/ # toast.svelte.ts
├── styles/ # theme.css (the one stylesheet)
├── utils/ # cn.ts, theme.ts
└── index.ts # public APIVersioning
@lyeve-labs/ui-kit follows SemVer. While under 1.0,
breaking changes bump the minor version; additive changes bump the patch.
Every release is logged in CHANGELOG.md and on the docs site.
Maintainers: the release workflow is CONTRIBUTING.md.
Contributing
Bug reports, prop suggestions, and component proposals are welcome. See
CONTRIBUTING.md for the development setup, coding
conventions, and how the kit stays cohesive.
License
MIT. See LICENSE.