mirror of
https://github.com/hanzoai/svelte.git
synced 2026-10-01 00:41:47 +00:00
zeekayandHanzo Dev
1008926ef7
Extracted from @hanzo/ui pkg/ui/src/backends/svelte with its history. It lived inside a React component library, which meant every consumer of @hanzo/ui resolved svelte whether they rendered a single Svelte component or not, and the package declared peer svelte>=5 against a dev svelte ^4.2.20 — two answers to one question. Three runtime dependencies, all load-bearing: class-variance-authority for the variants the components already used, and clsx + tailwind-merge behind cn. The cn helper is vendored (17 lines) rather than imported back from @hanzo/ui, because depending on the package this was extracted from would undo the split. No design-system runtime, no icon pack, no CSS-in-JS. svelte-check: 50 files, 0 errors. Co-authored-by: Hanzo Dev <[email protected]>
46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
# @hanzo/svelte
|
|
|
|
Hanzo UI for Svelte 5.
|
|
|
|
These components used to live inside `@hanzo/ui` as `@hanzo/ui/svelte`. They are
|
|
here now because a component library should be one stack: `@hanzo/ui` is React on
|
|
`@hanzo/gui`, and shipping a second renderer inside it meant every consumer
|
|
resolved `svelte` whether or not they used it.
|
|
|
|
Nothing about the components changed. Same shapes, same `cva` variants, same
|
|
tokens.
|
|
|
|
## Install
|
|
|
|
```sh
|
|
npm i @hanzo/svelte svelte
|
|
```
|
|
|
|
Two dependencies, on purpose: `svelte` (peer, yours) and `class-variance-authority`
|
|
(the variant function). No design-system runtime, no icon pack, no CSS-in-JS.
|
|
|
|
## Use
|
|
|
|
```svelte
|
|
<script>
|
|
import { Button, Card, CardHeader, CardContent } from '@hanzo/svelte'
|
|
</script>
|
|
|
|
<Card>
|
|
<CardHeader>Ship it</CardHeader>
|
|
<CardContent><Button variant="default">Go</Button></CardContent>
|
|
</Card>
|
|
```
|
|
|
|
Import one component if you want one component:
|
|
|
|
```svelte
|
|
import Button from '@hanzo/svelte/Button.svelte'
|
|
```
|
|
|
|
## Composition
|
|
|
|
Every component takes `class` and spreads the rest onto its root element, so a
|
|
variant is a function of props and nothing is hidden behind a theme provider.
|
|
Compose by wrapping, not by configuring.
|