Getting Started
Theming
Customize the look and feel with CSS custom properties and Tailwind utilities.
CSS Custom Properties
Override CSS variables to customize component behaviour. Each component documents its available variables.
Sidebar Variables
| Variable | Default | Purpose |
|---|---|---|
| --st-sidebar-width | 16rem | Expanded width |
| --st-sidebar-rail-width | 4rem | Collapsed (rail) width |
| --st-sidebar-duration | 200ms | Width transition duration |
st-sidebar {
--st-sidebar-width: 18rem;
--st-sidebar-rail-width: 3.5rem;
--st-sidebar-duration: 150ms;
}Tailwind CSS Integration
Components don't paint their own surfaces — that's an application-level decision. Apply background, border, and text colour directly using Tailwind utilities:
<!-- Card-like sidebar with right border -->
<st-sidebar class="border-r bg-card text-foreground">
<!-- Floating sidebar with shadow -->
<st-sidebar class="rounded-lg border bg-card text-foreground shadow-sm">
<!-- Sidebar matching the page background -->
<st-sidebar class="bg-background text-foreground">Dark Mode
Components respect Tailwind's dark mode. Use the dark: variant for dark mode styling:
<st-sidebar class="bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800">
...
</st-sidebar>