Svelte Guide (Beta)

@hanzo/ui provides Svelte 5 components with full TypeScript support. This integration is currently in beta.

Installation

npm install @hanzo/ui
# or
pnpm add @hanzo/ui

npm install svelte
npm install -D tailwindcss postcss autoprefixer

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/@hanzo/ui/**/*.{js,ts,svelte}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Usage

<script lang="ts">
  import { Button, Card, Input } from '@hanzo/ui/svelte'

  let count = $state(0)
</script>

<Card>
  <Button onclick={() => count++}>
    Clicked {count} times
  </Button>
  <Input bind:value={count} type="number" />
</Card>

SvelteKit Integration

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { Button, Card } from '@hanzo/ui/svelte'
</script>

<Card>
  <h1>Welcome to SvelteKit</h1>
  <Button>Click me</Button>
</Card>

Component Coverage

Available:

• Button, Card, Input, Label, Badge
• Checkbox, Dialog, Select, Separator
• Tabs, Toggle, Tooltip

In Progress:

• Form components
• Data Table
• Advanced animations

Status

This integration is in beta. Some components may have limited functionality compared to the React version. Please report issues on GitHub.

Next Steps

• View all components
• React Guide (stable)
• Vue Guide (stable)