npm create hono@latest my-app
# Select the HonoX template
cd my-app
npm install silva-ui

// app/client.ts
import "silva-ui/style.css"

export default function Client() {
  return <></>
}

// app/routes/index.tsx
import { Button, Card, Heading, Paragraph, Theme, YStack } from "silva-ui"

export default function Home() {
  return (
    <Theme name="light">
      <YStack p="large" gap="large">
        <Heading>Welcome</Heading>
        <Card bg="card" borderColor="border" p="large">
          <Paragraph color="muted">Rendered by HonoX.</Paragraph>
          <Button>Get started</Button>
        </Card>
      </YStack>
    </Theme>
  )
}

// app/islands/counter.tsx
import { useState } from "hono/jsx"
import { Button, Text, XStack } from "silva-ui"

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <XStack gap="small" alignItems="center">
      <Button onClick={() => setCount(count + 1)}>Add</Button>
      <Text>{count}</Text>
    </XStack>
  )
}

// app/routes/index.tsx
import Counter from "../islands/counter"

export default function Home() {
  return <Counter />
}