Components.
A complete catalog of UI primitives that ship with VELYON. Every piece is composable, accessible, and tuned to the system's motion and color language.
Buttons
Primary actions with five variants, three sizes, and complete state coverage.
<Button variant="primary" size="md">Primary</Button>
<Button variant="secondary" icon={Download}>Download</Button>
<Button loading>Loading</Button>
<Button iconOnly icon={Settings} variant="ghost" />Cards
Surface primitives — glass, elevated, statistic, and interactive variants.
Backdrop blur surface
Translucent panels for layered interfaces. The default container in VELYON.
Subtle elevation
Solid-feeling surface with directional shadow for prominent content.
Active components this week
Explore tokens
Hover to see the lift and azure glow.
<GlassCard>
<h3>Backdrop blur surface</h3>
<p>Translucent panels for layered interfaces.</p>
</GlassCard>
<StatCard value="24,839" label="Active components" trend="+12.4%" />Badges
Compact status indicators in four semantic colors and two sizes.
<Badge variant="active" dot>Active</Badge>
<Badge variant="pending" size="sm">Pending</Badge>
<Badge variant="error">Error</Badge>Form Elements
Inputs, selects, and selection controls with consistent focus and error states.
We'll never share this with anyone.
Must be at least 8 characters
<Input label="Email" placeholder="you@velyon.dev" helper="We'll never share this." />
<SearchInput placeholder="Search tokens…" />
<Select options={["Azure", "Obsidian"]} />
<Checkbox checked label="Subscribe" />Tables
A data table with glass header, striped rows, and embedded status badges.
| Token | Value | Type | Status | |
|---|---|---|---|---|
| color.azure.500 | #3D7EFF | color | active | |
| space.lg | 24px | spacing | active | |
| radius.xl | 16px | radius | active | |
| font.display | Suisse Intl | typography | pending | |
| shadow.glow | 0 0 40px ... | shadow | active | |
| ease.standard | [0.22, 1, ...] | motion | inactive |
<Table>
<TableHeader columns={["Token", "Value", "Type", "Status"]} />
<TableBody data={tokens} striped />
</Table>Callouts & Alerts
Inline messaging in five semantic flavors — each with icon, title, and body.
All components are tree-shakable and ship as ESM modules.
Your design tokens were synced successfully across 12 platforms.
Three tokens have proposed changes that need approval before release.
The token validator detected 2 contrast failures in your palette.
Use the keyboard shortcut ⌘K to open the command palette anywhere.
<Callout variant="info" title="Heads up">
All components are tree-shakable.
</Callout>
<Callout variant="success" title="Build passed">…</Callout>
<Callout variant="warning" title="Review required">…</Callout>Ready to build with these primitives?
Explore tokens, patterns, and the full installation guide.