Heading

A semantic heading component with auto-sizing, accent colors, and tracking control. Renders h1–h6 based on the level prop with appropriate sizing.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::heading level="2">Section title</x-wirekit::heading>

Basic Usage

<x-wirekit::stack gap="sm">
    <x-wirekit::heading :level="1">Heading 1 (2xl)</x-wirekit::heading>
    <x-wirekit::heading :level="2">Heading 2 (xl)</x-wirekit::heading>
    <x-wirekit::heading :level="3">Heading 3 (lg)</x-wirekit::heading>
    <x-wirekit::heading :level="4">Heading 4 (base)</x-wirekit::heading>
    <x-wirekit::heading :level="5">Heading 5 (sm)</x-wirekit::heading>
</x-wirekit::stack>

Explicit Sizing

Override the auto-size with the size prop.

<x-wirekit::stack gap="sm">
    <x-wirekit::heading :level="2" size="3xl">Large heading 2</x-wirekit::heading>
    <x-wirekit::heading :level="3" size="sm">Small heading 3</x-wirekit::heading>
</x-wirekit::stack>

Accent Color

Use the accent prop to apply the primary theme color.

<x-wirekit::stack gap="sm">
    <x-wirekit::heading :level="1" :accent="true">Accent Heading</x-wirekit::heading>
    <x-wirekit::heading :level="2" :accent="true">Accent Subheading</x-wirekit::heading>
</x-wirekit::stack>

Tracking

Control letter spacing with the tracking prop.

<x-wirekit::heading :level="1" tracking="tight">Tight Tracking</x-wirekit::heading>

Long Names

A heading often carries a name somebody chose, such as a template, a repository or a channel, and a name like that may have no space or hyphen to wrap at. It then runs out of its heading, and on a phone the whole page slides sideways. Set break="anywhere" and the name wraps only where the line would otherwise overflow, so ordinary titles still wrap between words.

<x-wirekit::container max="sm">
    <x-wirekit::stack gap="xs">
        <x-wirekit::text size="sm" intent="muted">Template</x-wirekit::text>
        <x-wirekit::heading :level="3" size="md" break="anywhere">release_announcement_with_highlights_contributors_and_upgrade_notes</x-wirekit::heading>
    </x-wirekit::stack>
</x-wirekit::container>

The prop takes the same three values as on text, with the same meaning: anywhere breaks only where a line would overflow, all between any two characters, and normal restores the browser's default rules.

Fitting the Line

A heading that breaks after its first word on a phone can shrink instead, down to a floor, with fit. It then takes the fewest lines the floor needs, at the largest size that keeps them. fit alone uses the --text-wk-fit-floor token, three quarters of the heading's size, and a length such as fit="0.6em" sets a floor of its own. How the fitting works and what it costs is on the Fit Text page.

<x-wirekit::heading :level="2" size="3xl" fit>Your order is on its way</x-wirekit::heading>

Page Layout Example

<x-wirekit::stack gap="sm">
    <x-wirekit::heading :level="1" size="3xl" tracking="tight">Welcome to WireKit</x-wirekit::heading>
    <x-wirekit::text size="lg" intent="muted">A component library for Laravel Livewire.</x-wirekit::text>
</x-wirekit::stack>

Auto-Sizing

When size is not provided, the heading auto-sizes based on level:

Props

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Design Tokens