Veil Theme Setup
Apply Veil theme tokens and update button, card, input, and textarea primitives for polished Svelte interfaces.
Install with CLI
Install the Veil 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 Veil primitives together under ui/veil, and import themes.css from layout.css.
Theme Quickstart
Add the Veil tokens to themes.css so
all Veil primitives resolve color, border, focus ring, and typography consistently.
Veil uses Geist for interface text and Asar for serif accents.
Apply Theme
Ensure your root body includes theme-container so the selected theme scope
is applied across the application.
Required Components
After theme tokens are configured, update these four Veil primitives in your app.
| Component | Import Path | Update Scope |
|---|---|---|
| Button | #lib/components/ui/veil/button | Variant and size classes, anchor/button rendering |
| Card | #lib/components/ui/veil/card | Root variants and all card composition primitives |
| Input | #lib/components/ui/veil/input | Field styling, file input branch, focus/error states |
| Textarea | #lib/components/ui/veil/textarea | Multiline field sizing, focus/error/disabled states |
Button Component
Veil button uses rounded-full geometry, compact sizing, and contrast-aware variants.
Source
Usage
Card Component
Veil card supports four variants: default, soft, mixed, and outline, with composition primitives for
header/content/footer layouts.
Source
Usage
Input Component
Veil input covers standard and file fields while preserving unified focus and invalid states.
Source
Usage
Textarea Component
Veil textarea shares input tokens, adds multiline sizing, and keeps focus/validation states aligned with other form controls.
Source
Usage
What’s next?
Explore the Veil blocks, or browse the Mist theme setup.