Components · Typography
Heading
StableSince v0.0.1
Semantic heading component with size, weight, and tone control.
import { Heading } from '@nexub/react';Examples
Default
Scale
Tones
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | The semantic HTML heading level rendered. |
| size | 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | — | Visual size of the heading, independent of the semantic level. |
| tone | 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger' | — | Color tone applied to the heading text. |
| weight | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | — | Font weight of the heading. |
| asChild | boolean | — | Merges props onto the immediate child element (Radix Slot). |
On iOS & Android
Web only
Heading has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.