All components
Heading
Display and section headings across eleven sizes with tuned line heights and tracking.
Ship faster
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> </> );}Sizes
Ship faster
smShip faster
mdShip faster
lgShip faster
xlShip faster
2xlShip faster
3xlShip faster
4xlInstall
1npx stylexblocks add headingSource
components/ui/base-ui/heading.tsx
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/base-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { fonts } from '@stylexblocks/ui/tokens/fonts.stylex.ts'import { letterSpacings } from '@stylexblocks/ui/tokens/letter-spacings.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'
const headingStyles = stylex.create({ base: { fontFamily: fonts.heading, fontWeight: fontWeights.medium, },})
const headingSizes = stylex.create({ xs: { fontSize: fontSizes.xs, lineHeight: lineHeights.heading_xs, letterSpacing: letterSpacings.heading_xs, }, sm: { fontSize: fontSizes.sm, lineHeight: lineHeights.heading_sm, letterSpacing: letterSpacings.heading_sm, }, md: { fontSize: fontSizes.md, lineHeight: lineHeights.heading_md, letterSpacing: letterSpacings.heading_md, }, lg: { fontSize: fontSizes.lg, lineHeight: lineHeights.heading_lg, letterSpacing: letterSpacings.heading_lg, }, xl: { fontSize: fontSizes.xl, lineHeight: lineHeights.heading_xl, letterSpacing: letterSpacings.heading_xl, }, '2xl': { fontSize: fontSizes._2xl, lineHeight: lineHeights.heading_2xl, letterSpacing: letterSpacings.heading_2xl, }, '3xl': { fontSize: fontSizes._3xl, lineHeight: lineHeights.heading_3xl, letterSpacing: letterSpacings.heading_3xl, }, '4xl': { fontSize: fontSizes._4xl, lineHeight: lineHeights.heading_4xl, letterSpacing: letterSpacings.heading_4xl, }, '5xl': { fontSize: fontSizes._5xl, lineHeight: lineHeights.heading_5xl, letterSpacing: letterSpacings.heading_5xl, }, '6xl': { fontSize: fontSizes._6xl, lineHeight: lineHeights.heading_6xl, letterSpacing: letterSpacings.heading_6xl, }, '7xl': { fontSize: fontSizes._7xl, lineHeight: lineHeights.heading_7xl, letterSpacing: letterSpacings.heading_7xl, },})
export type HeadingSize = keyof typeof headingSizes
/** * Heading — recipe and component colocated in one file. The size prop * resolves mechanically from the axis map. Composition via `render` * (e.g. render as h1..h6). */const headingRecipe = defineRecipe({ styles: headingStyles, axes: { size: headingSizes }, defaultVariants: { size: "xl" },});
export const Heading = createComponent("h2", headingRecipe, "Heading");
export type HeadingProps = React.ComponentProps<typeof Heading>;