Build Hono UIs with composable primitives

silva-ui is a TypeScript component library for Hono JSX. It ships prebuilt CSS generated with Vanilla Extract, a token-driven styling API, and components that remain framework-neutral at render time.

The package has a peer dependency on hono@^4.13.13. Components and the stylesheet are imported from the package root and silva-ui/style.css respectively.

What you get

Zero runtime styles: CSS is generated at build time.
Theme scopes: apply one of the included themes to a subtree with Theme.
Sprinkles props: use typed spacing, colour, layout, sizing and state props on every primitive.
Visual primitives: apply named gradients and lightweight animations without application CSS.
Hono-first JSX: lean components designed for Hono, while keeping framework-specific types out of the public API.

Start building

Install the package and CSS.

Use tokens

Explore built-in themes and colours.

Browse components

Build forms, layouts and overlays.

See every export

Use the public API as a reference.

Preview
Code

import "silva-ui/style.css"
import { Avatar, AvatarFallback, Card, Heading, Paragraph, YStack } from "silva-ui"

export function ProfileCard() {
  return (
    <Card elevated p="large" maxWidth={400}>
      <YStack gap="medium" alignItems="center">
        <Avatar size="xl">
          <AvatarFallback>S</AvatarFallback>
        </Avatar>
        <YStack gap="xs" alignItems="center">
          <Heading level={2}>Silva UI</Heading>
          <Paragraph size="sm" color="muted">Building with Hono JSX.</Paragraph>
        </YStack>
      </YStack>
    </Card>
  )
}

Next: install silva-ui.

Get started

Foundations

Components

Reference

Introduction

Build Hono UIs with composable primitives

What you get

Start building

Use tokens

Browse components

See every export

A small profile card

​Build Hono UIs with composable primitives

​What you get

Start building

Use tokens

Browse components

See every export

​A small profile card

Build Hono UIs with composable primitives

What you get

A small profile card