Typography
Heading and Text map to the type scale, keep semantics separate from looks, and handle truncation and clamping for you.
TypographyNew
Heading
Dashboard
Recent activity — an h2 styled small
Text
Updated 2 min ago
Deployed to production
Payment failed
VhyxUI components are accessible by default, animate with motion tokens, carry machine-readable VhyxSeal contracts for AI agents, and style with plain CSS variables or Tailwind utilities.
Kbd
Search⌘KCloseEsc
Props
Text
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'p' | Element to render. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Font size token. |
tone | 'default' | 'subtle' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inherit' | 'default' | Semantic colour. |
weight | 'normal' | 'medium' | 'semibold' | 'bold' | — | Font weight token. |
truncate | boolean | — | One line with ellipsis. |
lines | number | — | Clamp to N lines. |
mono | boolean | — | Monospace font. |
Heading
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Renders <h1>…<h6>. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | — | Visual size (defaults from level). |