Skip to main content
WireKit
Copy for LLM

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.

Sandbox

Section title 

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

Basic Usage

Heading levels

Heading 1 (2xl)

Heading 2 (xl)

Heading 3 (lg)

Heading 4 (base)

Heading 5 (sm) 
<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.

Custom sizes

Large heading 2

Small heading 3 

<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.

Accent headings

Accent Heading

Accent Subheading 

<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.

Tight tracking

Tight Tracking 

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

Page Layout Example

Page header with heading and text

Welcome to WireKit

A component library for Laravel Livewire. 

<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" variant="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:

Level Auto Size
1 2xl
2 xl
3 lg
4 base
5, 6 sm

Props

Prop Type Default Description
level int|null null Heading level 1–6 (renders h1–h6). Defaults to 2
size string|null null Font size: sm, base, lg, xl, 2xl, 3xl. Auto-sized from level when null
accent bool false Use primary color
tracking string 'normal' Letter spacing: normal, tight, tighter
as string|null null Override element (defaults to h1–h6 based on level)
scope string|null null Scoped personalization name

Keyboard Interaction

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

Design Tokens

Token Used for
--font-wk-sans Font family
--font-wk-heading-weight Font weight
--font-wk-heading-line-height Line height (fallback: 1.25)
--text-wk-sm through --text-wk-3xl Font sizes
--color-wk-text Default color
--color-wk-accent-text Accent color

Was this page helpful?

Voting requires cookies or local storage. What we store