> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Add silva-ui to a Hono JSX application.

# Installation

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

```bash theme={null}
npm install silva-ui hono
```

## Import the CSS

```tsx theme={null}
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.

```bash theme={null}
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](https://blacksilva.com/silva-ui/silva-ui/docs/setup/create-silva-ui.md) for starter choices, supported runtimes, and scripted generation. Existing Hono JSX applications can install `silva-ui` directly.

## Create a route

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=install-2)

> [tab] Code
>
> ```tsx theme={null}
> 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
> ```

> [!NOTE]
>
> `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](https://blacksilva.com/silva-ui/silva-ui/docs/setup/create-silva-ui.md) or [apply a theme](https://blacksilva.com/silva-ui/silva-ui/docs/theming.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.