Component
Heading
Titles a section with a semantic heading level.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/headingExamples
Live previews render through the docs app's PandaCSS codegen.
<Heading as="h1">Page title</Heading>
<Heading as="h2">Section heading</Heading>
<Heading as="h1" size="display"> Hero headline </Heading>
<Heading as="h3" tone="accent"> Tinted subsection </Heading>
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `as` | `HeadingLevel` | No | - | Heading level. Renders the matching \`<hN>\` and picks its textStyle by default. Defaults to \`h2\`. |
| `color` | `TextColor` | No | - | Neutral foreground colour. Ignored when \`tone\` is set. Defaults to \`default\`. |
| `lineClamp` | `number` | No | - | - |
| `size` | `TextSize` | No | - | Visual size, decoupled from the semantic level. Defaults to match \`as\`. |
| `tone` | `Tone` | No | - | Selects a semantic status palette, overriding \`color\`. |
| `truncate` | `boolean` | No | - | - |
| `align` | `TextAlign` | No | - | - |
| `weight` | `TextWeight` | No | - | Defaults to \`semibold\`. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `size` | `displayLg`, `display`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `bodyLg`, `body`, `bodySm`, `caption`, `micro` |
| `weight` | `regular`, `medium`, `semibold`, `bold` |
| `align` | `start`, `center`, `end`, `justify` |
| `truncate` | `true` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/heading.json`
- Recipe: `text`
- Files: `src/components/ui/heading.tsx`