> ## 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.

# Introduction

> A zero-runtime component library for Hono JSX.

# 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.

> [!NOTE]
>
> 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.

> [card] [Start building](https://blacksilva.com/silva-ui/silva-ui/docs/installation.md)
>
> Install the package and CSS.

> [card] [Use tokens](https://blacksilva.com/silva-ui/silva-ui/docs/theming.md)
>
> Explore built-in themes and colours.

> [card] [Browse components](https://blacksilva.com/silva-ui/silva-ui/docs/components/forms.md)
>
> Build forms, layouts and overlays.

> [card] [See every export](https://blacksilva.com/silva-ui/silva-ui/docs/reference/exports.md)
>
> Use the public API as a reference.

## A small profile card

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

> [tab] Code
>
> ```tsx theme={null}
> 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](https://blacksilva.com/silva-ui/silva-ui/docs/installation.md).


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