Veil Theme Setup
Apply Veil theme tokens and update button, card, input, and textarea primitives for consistent UI styling.
Theme Quickstart
Add the Veil tokens to your global stylesheet (for example app.css or globals.css) so all Veil primitives resolve color, border, focus ring, and
typography consistently.
Veil Theme uses Geist, Asar font.
Gesit Font : Geist on Google Fonts
Asar Font : Asar on Google Fonts
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.
Usage
Source
Card Component
Veil card supports four variants: default, soft, mixed, and outline, with composition primitives for
header/content/footer layouts.
Usage
Source
Input Component
Veil input covers standard and file fields while preserving unified focus and invalid states.
Usage
Source
Textarea Component
Veil textarea shares input tokens, adds multiline sizing, and keeps focus/validation states aligned with other form controls.