---
title: Heading
description: Semantic heading (h1–h6) with auto-sizing
visibility: guest
draft: false
---

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

:::preview{title="Sandbox" sandbox="heading" props='{"level":2,"body":"Section title"}'}
<x-wirekit::heading level="2">Section title</x-wirekit::heading>
:::

## Basic Usage

:::preview{title="Heading levels"}
<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.

:::preview{title="Custom sizes"}
<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.

:::preview{title="Accent headings"}
<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.

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

## Page Layout Example

:::preview{title="Page header with heading and text"}
<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 |