# UI Components

> Server-rendered HTML component library for Koze

Package: Kuzan
Canonical: https://kuratchi.dev/docs/kuzan
Markdown: https://kuratchi.dev/docs/kuzan/index.md

## What is kuzan?

`kuzan` is an **optional** server-rendered HTML component library designed specifically for Koze applications. It provides a collection of pre-built, accessible UI components that work seamlessly with the Koze framework.

## Key features

- **Server-rendered** — Components are `.html` templates that compile to server-side code
- **Zero JavaScript by default** — Most components work without client-side JS
- **Dark mode built-in** — Automatic theme switching with localStorage persistence
- **Customizable theming** — CSS variables for colors, spacing, shadows, and radii
- **Accessible** — Semantic HTML with ARIA attributes where needed
- **Framework-native** — Uses Koze's template syntax and component model

## Philosophy

Unlike traditional component libraries that ship heavy JavaScript bundles, `kuzan` embraces server-side rendering:

- Components are imported as `.html` files directly into your routes
- Styling is handled via a single `theme.css` file with CSS variables
- Interactive components use minimal vanilla JavaScript
- No build-time CSS processing required (though Tailwind is supported)

## When to use it

`kuzan` is ideal when you want:

- A consistent design system without building components from scratch
- Server-rendered UI with minimal client-side JavaScript
- Dark mode support out of the box
- Semantic HTML with sensible defaults

## When not to use it

You might prefer building custom components if:

- You need highly specialized or branded UI components
- You want complete control over every CSS detail
- You're already using another UI framework (Tailwind, DaisyUI, etc.)

## Component categories

`kuzan` includes components for:

- **Layout** — App shells, sidebars, headers, dashboards
- **Content** — Cards, alerts, callouts, empty states
- **Forms** — Inputs, labels, fieldsets (styled via semantic HTML)
- **Navigation** — Breadcrumbs, tab navigation, dropdowns
- **Data display** — Badges, status chips, data lists, progress bars
- **Interactive** — Dialogs, drawers, accordions, theme toggles
- **Utilities** — Loading states, tooltips, hints

## Next steps

- [Getting Started](/docs/kuzan/getting-started) — Install and configure `kuzan`
- [Theming](/docs/kuzan/theming) — Customize colors, dark mode, and radii
- [Components](/docs/kuzan/components) — Browse the full component reference