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]>
1.2 KiB
@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
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
<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:
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.