Multi-Framework Support

@hanzo/ui provides official support for multiple JavaScript frameworks, not just React. This means you get consistent, well-tested components across your entire stack.

Supported Frameworks

Why Multi-Framework?

Unlike shadcn/ui which relies on community ports, @hanzo/ui provides:

• Single Source of Truth: All frameworks maintained in one repository
• Consistent API: Same component props across all frameworks
• Unified Documentation: One place for all examples
• Synchronized Updates: Bug fixes and features released together
• Type Safety: Full TypeScript support everywhere

Installation

React (Default)

npm install @hanzo/ui

import { Button, Card } from "@hanzo/ui"
// or explicitly
import { Button } from "@hanzo/ui/react"

Vue

npm install @hanzo/ui

<script setup>
import { Button, Card } from '@hanzo/ui/vue'
</script>

<template>
  <Card>
    <Button variant="default">Click me</Button>
  </Card>
</template>

Svelte

npm install @hanzo/ui

<script>
import { Button, Card } from '@hanzo/ui/svelte'
</script>

<Card>
  <Button variant="default">Click me</Button>
</Card>

React Native

npm install @hanzo/ui
npm install react-native-reanimated react-native-gesture-handler

import { Button, Card } from "@hanzo/ui/react-native"
import { View } from "react-native"

function App() {
  return (
    <View>
      <Card>
        <Button variant="default">Click me</Button>
      </Card>
    </View>
  )
}

Component Availability

Most core components are available across all frameworks:

Available Everywhere:

• Alert, Avatar, Badge, Button, Card
• Checkbox, Dialog, Input, Label, Progress
• Radio, Separator, Skeleton, Switch
• Tabs, Textarea, Toast, Toggle

React/Vue/Svelte Only:

• Table, Popover, Tooltip, Sheet
• Command, Context Menu, Dropdown Menu

React Only (Currently):

• Advanced 3D components
• AI components
• Some animation components

See individual framework guides for complete component lists.

Conversion Tools

Convert components between frameworks:

# Convert React to Vue
npx @hanzo/ui convert --from react --to vue button.tsx

# Convert to all frameworks
npx @hanzo/ui convert --from react --to all button.tsx

Framework-Specific Patterns

Each framework has its own patterns for:

• State Management: React hooks, Vue composables, Svelte stores
• Styling: All use Tailwind CSS
• Event Handling: Framework-native events
• Refs: React refs, Vue template refs, Svelte bindings

See framework-specific guides for details.

Next Steps

• React Guide - Complete React documentation
• Vue Guide - Vue 3 Composition API guide
• Svelte Guide - Svelte 4/5 guide
• React Native Guide - Mobile development guide