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

export default function HeadingDemo() {

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/heading
Copy

Usage#

Copyimport { Heading } from "@/components/ui/heading"

Copy<Heading
  level={1 | 2 | 3 | 4 | 5 | 6}
  size="1 | 2 | 3 | 4 | 5 | 6"
  wrap="normal | nowrap | balance | pretty"
>
  Heading
</Heading>

level sets the rendered tag. size sets the visual scale and defaults to level, so most of the time you only pass level.

Examples#

Levels#

level renders the matching h1–h6 tag and picks the matching size.

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

export default function HeadingLevels() {

Sizes#

Use size to pick a scale step directly. 1 is the largest and 6 the smallest.

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

export default function HeadingSizes() {

Pairing with a paragraph#

The two scales are numbered together. Passing the same size to Heading and Paragraph keeps the title and its copy in proportion at every step.

import { Heading } from "@/components/ui/heading"
import { Paragraph } from "@/components/ui/paragraph"

Level and size apart#

Document outlines and visual hierarchy do not always agree. Set size to keep the heading rank the page needs while showing the size the design needs.

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

export default function HeadingLevelAndSize() {

Wrap#

wrap controls how the text breaks across lines. It defaults to normal, the browser's own wrapping. nowrap keeps the heading on a single line. balance evens out the length of every line, which suits short headings. pretty instead fills lines normally and only tidies the last one, so it does little more than avoid an orphaned final word.

On a short two-line heading balance and pretty land on the same result — the difference only shows once the text runs to three or more lines, as below.

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

export default function HeadingWrap() {

For per-breakpoint wrapping, reach for className instead — text-* wrap utilities merge cleanly, so <Heading wrap="pretty" className="md:text-balance" /> is pretty on small screens and balance from md up.

Each value maps to the matching Tailwind utility. See the text-wrap documentation for the details behind each one.

Custom element#

Use the render prop when the markup needs a different element — a legend inside a fieldset, for example — but you still want heading styles.

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

export default function HeadingRender() {

API reference#

Heading#

Renders an h1–h6 element styled from the heading scale.

Scale#

Every size also gets font-heading text-foreground, plus a wrap utility from wrap (text-wrap by default). Pass the same size to Paragraph to pair the heading with its matching body copy.