SV5UI

Modern UI component library for Svelte 5
Tailwind CSS 4 · OKLCH Color Tokens · Fully Typed · 50+ Components · 7 Hooks

Live Demo · Getting Started · Changelog

Install

npm install sv5ui
# pnpm add sv5ui
# yarn add sv5ui
# bun add sv5ui

/* layout.css */
@import 'sv5ui/theme.css';

<script>
    import { Button, Avatar, toast } from 'sv5ui'
</script>

<Button variant="soft" color="primary" leadingIcon="lucide:edit">Edit</Button>
<Avatar src="/photo.jpg" alt="Jane" size="lg" />

Features

• Svelte 5 — Runes, snippets, latest reactivity
• Tailwind CSS 4 — Utility-first with Tailwind Variants
• Fully Typed — Strict TypeScript, exported prop types
• Accessible — Built on Bits UI & Vaul Svelte
• 200,000+ Icons — Iconify integration
• Themeable — OKLCH color tokens, light/dark mode, global config
• Hooks — 7 reactive hooks for common UI patterns

Hooks

Reactive hooks built on Svelte 5 runes and actions.

<script>
    import { useMediaQuery, useClipboard, useDebounce } from 'sv5ui'

    const isMobile = useMediaQuery('(max-width: 640px)')
    const clipboard = useClipboard()
    const debounce = useDebounce({ delay: 500 })
</script>

{#if isMobile.matches}
    <MobileLayout />
{/if}

<Button onclick={() => clipboard.copy('Hello!')}>
    {clipboard.copied ? 'Copied!' : 'Copy'}
</Button>

Customization

<!-- Per-instance -->
<Button ui={{ base: 'rounded-full shadow-lg' }}>Custom</Button>

// Global defaults
import { defineConfig } from 'sv5ui'

defineConfig({
    button: { defaultVariants: { variant: 'outline' } },
    icons: { loading: 'lucide:loader' }
})

/* Custom colors */
:root {
    --color-primary: oklch(0.55 0.25 270);
}

License

MIT © ndlabdev