Installation

Install the package alongside Hono, then import its stylesheet once at your application entry point.

npm install silva-ui hono

Import the CSS

import "silva-ui/style.css"

The package exposes this stylesheet as the silva-ui/style.css subpath. Import it once in the module shared by your routes. It contains the component styles and built-in theme variables, so this one-line setup does not need a visual preview.

Start a new app

Use create-silva-ui to start a static SPA, a full-stack Hono SSR app, or an SSR-only Hono app. The prompt asks you to choose the starter and, for SSR, the target runtime.

npm create silva-ui@latest my-silva-ui-app
cd my-silva-ui-app
npm install
npm run typecheck
npm run dev

See Create a Silva UI app for starter choices, supported runtimes, and scripted generation. Existing Hono JSX applications can install silva-ui directly.

Create a route

Preview
Code

import { Hono } from "hono"
import "silva-ui/style.css"
import { Button, Heading, Paragraph, Theme, YStack } from "silva-ui"

const app = new Hono()

app.get("/", (c) => c.html(
  <Theme name="emerald" p="large">
    <YStack gap="medium" maxWidth={400}>
      <Heading level={1}>Hello, Silva</Heading>
      <Paragraph color="muted">Your UI is ready to grow.</Paragraph>
      <Button type="button">Get started</Button>
    </YStack>
  </Theme>,
))

export default app

Theme renders a div by default. Set as when a different HTML element is needed.

Package entry points

Import	Purpose
`silva-ui`	Components, tokens, types and theme utilities
`silva-ui/style.css`	Prebuilt CSS required by the components

Next: create a starter or apply a theme.

Get started

Foundations

Components

Reference

Installation

Installation

Import the CSS

Start a new app

Create a route

Package entry points

​Installation

​Import the CSS

​Start a new app

​Create a route

​Package entry points

Installation

Import the CSS

Start a new app

Create a route

Package entry points