Tavo.js UI documentation
The complete source of truth for installing, theming, composing, validating, and shipping accessible Tavo.js interfaces.
Choose the documentation flow
Add UI to an application
Understand the UI system
Choose a component
Look up an exact API
How Tavo.js UI fits together
Tavo.js UI is an optional interface system for Tavo.js applications. The framework owns routing, rendering, application state, and production output. Tavo.js UI adds accessible components, compiled component styles, responsive props, generated theme variables, and focused interface tooling.
Component imports supply structure and behavior. The project theme supplies shared design decisions such as color, typography, spacing, density, radii, and motion. The tavoUi plugin validates that config and makes the resulting theme available during normal development and production builds.
Know which package or command owns the job
Tavo.js UI is optional. It builds on the Tavo.js Framework, but it does not replace the framework runtime or its command-line tools.
| Name | Responsibility | Package and command |
|---|---|---|
| Tavo.js Framework | Routes, TSX rendering, loaders, actions, middleware, SSR, and browser navigation. | @tavojs/core · tavo |
| Tavo.js UI | Optional web components, compiled component CSS, themes, metadata, and the Tavo.js UI plugin. | @tavojs/ui · tavo-ui |
| UI Core | Platform-neutral theme resolution for custom exporters and design tooling. | @tavojs/ui-core · advanced tooling only |
Follow one component from config to interface
texttavo-ui.config.json
→ tavoUi() validates and resolves the project theme
→ generated variables enter the application build
→ component imports load their compiled structural styles
→ responsive props resolve against shared breakpoints
→ the initial interface renders with the selected theme
→ themeController handles later device, light, or dark changesBrowse Tavo.js UI by system
Start
Theme system
Layout and composition
Component behavior
Quality and tooling
Component catalog
Reference
Compose a page from semantic primitives
Start with Page and Section for structure, Stack or Grid for layout, Text for hierarchy, and focused product components for interaction. Reach for custom CSS only when component props and tokens do not express the product-specific requirement.
tsximport { Button, Card, Grid, Page, Section, Stack, Text } from "@tavojs/ui";
export function Dashboard() {
return <Page>
<Section title="Projects" description="Work currently in delivery">
<Grid columns={{ base: 1, md: 2 }} spacing="md">
<Card title="Documentation"><Text>Developer experience overhaul</Text></Card>
<Card title="Framework"><Text>Production validation</Text></Card>
</Grid>
<Stack align="start"><Button>Create project</Button></Stack>
</Section>
</Page>;
}Browse the component reference when you need exact props, composition rules, accessibility notes, and focused imports.
How to read this reference
Focused guides explain ownership, workflows, defaults, failure behavior, and verification. Component pages own exact props and composition rules. The generated API inventory mirrors the declarations in the connected Tavo.js UI checkout.
Use the verification loop early
Validate the theme independently, then verify the complete application build. This catches invalid tokens, contrast problems, generated-style failures, SSR mismatches, and unexpected bundle cost before release.
bashnpx tavo-ui web check
npx tavo-ui web audit
npx tavo build --report-json
npx tavo preview --ssr