# Heading

> Renders an h1 to h6 from a number, so you set the heading level and the visual size separately.

Facade UI item `heading` (ui, atom).
Docs page: https://facadeui.dev/components/heading · Registry JSON: https://facadeui.dev/r/heading.json

## Install

```bash
npx shadcn@latest add @facade/heading
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/heading.json`. The CLI also installs what it needs: @facade/types.

Files: `components/ui/heading.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/heading-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Heading } from "@/components/ui/heading"

export function Demo() {
  return (
    <div className="flex flex-col gap-4">
      {/* Same visual size, four different outline levels. */}
      <Heading level={2} className="text-display-sm font-semibold">
        Rendered as h2
      </Heading>
      <Heading level={3} className="text-display-sm font-semibold">
        Rendered as h3
      </Heading>
      <Heading level={4} className="text-display-sm font-semibold">
        Rendered as h4
      </Heading>
      <p className="text-muted-foreground text-sm">
        Visual size is a class. The outline level is the <code>level</code> prop. Changing
        one never changes the other.
      </p>
    </div>
  )
}
```

## Props

### HeadingProps

Extends ComponentPropsWithoutRef<"h2">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `level` (required) | `HeadingLevel` |  | 1 to 6. Sets the heading level, not the visual size. |