UI kit
Card title
Composable surfaces for dashboards and settings.
UI kit
Buttons, forms, feedback, data display, and inputs — token-backed BEM classes you compose in product screens. Pair with the Interactive and Runtime 1.0 demos.
Actions
Forms
Data
WC
Actions
Button variants and sizes
Status & badges
Primary
Success
Warning
Danger
Info
Outline
Feedback
Deployment finished — your preview is live.
API rate limit at 80% for this workspace.
Payment method expired. Update billing to avoid downtime.
New CLI flags documented in the extend section.
Forms
Accordion
Keyboard-friendly disclosure via velin-accordion
Design tokens
Colors, spacing, and radii are exposed as CSS custom properties so themes and dark mode stay consistent.
Container queries
Layout utilities combine with container queries so components respond to their parent, not only the viewport.
Web Components
Overlays, tabs, and inputs ship with focus management and ARIA patterns aligned to WCAG 2.2 AAA-oriented defaults.
Rating & segmented control New in 0.8.0
Star input and segmented toggles share theme tokens and respect prefers-reduced-motion.
Combobox New in 0.8.0
Filterable single-select with full keyboard support.
Typography & display
Font tokens: .velin-font-display, .velin-tabular-nums, .velin-text-pretty
Display heading
Pretty text wraps long lines for readability in marketing copy and docs intros.
1,284,092.40 EUR tabular nums
Data table
Striped, hover, and responsive wrapper utilities.
| Token | Role | AAA |
|---|---|---|
--velin-color-text | Body | 7:1+ |
--velin-color-primary | Actions | 7:1+ |
--velin-color-text-muted | Secondary | Checked |
Cards & skeleton
Progress & loading
Spinners and progress bars for async states.
Code block
<velin-code-block> with lazy highlight — see Runtime demo.