All components
Heading
Display and section headings across eleven sizes with tuned line heights and tracking.
Ship faster
Sizes
Ship faster
smShip faster
mdShip faster
lgShip faster
xlShip faster
2xlShip faster
3xlShip faster
4xlInstall
zsh — heading
1bunx stylexblocks add headingUsage — Base UI
heading.tsx
1234567891011121314import { Heading } from "#components/ui/base-ui/heading.tsx";
export function Example() { return ( <> {/* the size prop resolves through the StyleX recipe and is exposed as a data-size attribute */} <Heading size="2xl">Ship faster</Heading>
{/* composition: the render prop picks the semantic heading level */} <Heading size="4xl" render={<h1 />}>StyleX Blocks</Heading> </> );}