Mist Theme Setup
Apply Mist theme tokens and update button, card, input, label, and textarea primitives for clean Svelte interfaces.
Install with CLI
Install the Mist theme tokens and required UI primitives with the shadcn-svelte CLI.
The CLI updates your main CSS theme variables. Use the manual setup below to keep the theme variables separate without replacing the variables in your main CSS file.
Folder structure
Keep the Mist primitives together under ui/mist, and import themes.css from layout.css.
Theme Quickstart
Add the Mist theme variables to themes.css so Mist primitives resolve color, border, and contrast consistently.
Apply Theme
Ensure your root body includes theme-container so the selected Mist theme
is applied across the application.
Required Components
After theme tokens are configured, update these five Mist primitives in your app.
| Component | Import Path | Update Scope |
|---|---|---|
| Button | #lib/components/ui/mist/button | Variant and size classes, anchor/button rendering |
| Card | #lib/components/ui/mist/card | Root variants and all card composition primitives |
| Input | #lib/components/ui/mist/input | Field styling, file input branch, focus/error states |
| Label | #lib/components/ui/mist/label | Form labels and disabled field states |
| Textarea | #lib/components/ui/mist/textarea | Multiline field sizing, focus, and disabled states |
Button Component
Mist button adds a neutral variant for bold monochrome actions while keeping
the standard shadcn-like variants.
Source
Usage
Card Component
Mist card adds soft and mixed variants to support subtle sections
commonly used across documentation-style layouts.
Source
Usage
Input Component
Mist input supports standard and file fields with consistent focus, invalid, and disabled states.
Source
Usage
Label Component
Mist label keeps form text clear and reflects disabled field states.
Source
Usage
Textarea Component
Mist textarea provides a simple multiline field with matching focus and disabled states.
Source
Usage
What’s next?
Explore the Mist blocks, or continue with the Veil theme setup.