Heading

Visual size is independent of semantic level: <Heading level={2} size="xl">.

Import

import { Heading } from '@marbleui/ui'

Props

<Heading>

Prop	Type	Default	Description
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'display'`	`'md'`

Also accepts React Aria props (3) and HTML element props (277).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Heading. Follow the primitive's docs for the full keyboard map.

Usage notes

Heading with a visual size that is independent of its semantic level. For body copy use Text; for rich article content use Prose.

<Heading level={1} size="xl">Ship faster</Heading>
<Heading level={3} size="sm">Components</Heading>

level (1–6, default 2) sets the element; size (xs, sm, md default, lg, xl, display) sets only the look.
Keep levels in order without skipping, and choose size for appearance.
Text wraps balanced. It is a React Aria Heading, so other heading props pass through.

Example source · show

import { Heading } from './heading'

export const styles = {
  Scale: () => (
    <div className="flex flex-col gap-3">
      <Heading level={1} size="xl">Ship faster</Heading>
      <Heading level={2} size="lg">Design system</Heading>
      <Heading level={3} size="md">Components</Heading>
      <Heading level={4} size="sm">Buttons</Heading>
      <Heading level={5} size="xs">Variants</Heading>
    </div>
  ),
  Display: () => (
    <div className="max-w-xl text-center">
      <Heading level={1} size="display">Build once. Style forever.</Heading>
    </div>
  ),
}

Source: packages/ui/src/heading/heading.tsx

Catalog

Category: typography
Priority: Core
Primitive: custom
React Aria: Heading