Dusk Theme Setup
Set up the Zinc-based Dusk theme and its button, card, input, and label primitives for Svelte applications.
Install with CLI
Install the Dusk Zinc tokens and all required UI primitives with the shadcn-svelte CLI.
Dusk uses the shadcn-svelte Zinc palette with Dusk-specific component styling. The CLI updates your main CSS variables; use the manual setup below to keep them scoped.
Folder structure
Keep every Dusk primitive under ui/dusk, and import themes.css from layout.css.
Manual setup
Add the Zinc-based Dusk variables to themes.css. These are the same tokens installed by the Dusk registry theme.
Apply Theme
Apply the Dusk scope and theme container at your application root.
Required Components
The Dusk registry keeps these four primitives isolated from your default shadcn-svelte components.
#lib/components/ui/dusk/button#lib/components/ui/dusk/card#lib/components/ui/dusk/input#lib/components/ui/dusk/labelButton Component
Dusk uses rounded actions and includes neutral, ink, and marketing-oriented variants.
Source
Usage
Card Component
Dusk cards provide default, soft, and mixed surfaces plus composable card sections.
Source
Usage
Input Component
Dusk inputs cover text and file fields with matching focus, invalid, and disabled states.
Source
Usage
Label Component
Dusk labels pair with form controls and reflect disabled field states.
Source
Usage
What’s next?
Explore the Dusk blocks, or compare the Mist theme setup and Veil theme setup.