https://github.com/ndlabdev/sv5ui
Svelte 5 UI library — 38+ typed components, Tailwind CSS 4, dark mode, accessible
https://github.com/ndlabdev/sv5ui
accessible bits-ui dark-mode design-system svelte5 tailwindcss typescript ui-library
Last synced: 2 months ago
JSON representation
Svelte 5 UI library — 38+ typed components, Tailwind CSS 4, dark mode, accessible
- Host: GitHub
- URL: https://github.com/ndlabdev/sv5ui
- Owner: ndlabdev
- License: mit
- Created: 2026-01-27T01:48:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-03-27T14:07:41.000Z (3 months ago)
- Last Synced: 2026-03-27T23:59:38.023Z (3 months ago)
- Topics: accessible, bits-ui, dark-mode, design-system, svelte5, tailwindcss, typescript, ui-library
- Language: TypeScript
- Homepage: https://sv5ui.vercel.app/
- Size: 772 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
```bash
npm install sv5ui
# pnpm add sv5ui
# yarn add sv5ui
# bun add sv5ui
```
```css
/* layout.css */
@import 'sv5ui/theme.css';
```
```svelte
import { Button, Avatar, toast } from 'sv5ui'
Edit
```
## Features
- **Svelte 5** — Runes, snippets, latest reactivity
- **Tailwind CSS 4** — Utility-first with [Tailwind Variants](https://www.tailwind-variants.org/)
- **Fully Typed** — Strict TypeScript, exported prop types
- **Accessible** — Built on [Bits UI](https://bits-ui.com) & [Vaul Svelte](https://vaul-svelte.com)
- **200,000+ Icons** — [Iconify](https://iconify.design) 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.
```svelte
import { useMediaQuery, useClipboard, useDebounce } from 'sv5ui'
const isMobile = useMediaQuery('(max-width: 640px)')
const clipboard = useClipboard()
const debounce = useDebounce({ delay: 500 })
{#if isMobile.matches}
{/if}
clipboard.copy('Hello!')}>
{clipboard.copied ? 'Copied!' : 'Copy'}
```
| Hook | Type | Description |
| ------------------- | -------------- | ---------------------------------------------- |
| `useMediaQuery` | Runes | Reactive CSS media query tracking |
| `useClipboard` | Runes | Copy text with auto-reset state |
| `useFormField` | Context | Access FormField context from child components |
| `useDebounce` | Runes | Debounce with pending, cancel, flush |
| `useClickOutside` | Action | Detect clicks outside an element |
| `useInfiniteScroll` | Runes + Action | Auto-load on scroll with loading state |
| `useEscapeKeydown` | Action | Listen for Escape key |
## Customization
```svelte
Custom
```
```ts
// Global defaults
import { defineConfig } from 'sv5ui'
defineConfig({
button: { defaultVariants: { variant: 'outline' } },
icons: { loading: 'lucide:loader' }
})
```
```css
/* Custom colors */
:root {
--color-primary: oklch(0.55 0.25 270);
}
```
## License
[MIT](LICENSE) © [ndlabdev](https://github.com/ndlabdev)