Headline

beta

A section's big two-tone headline: the claim in full ink, then the rest in gray.

Built from Texture.

Preview

with a description

Who's coming, what's planned, and who's improving, on every phone in the team.

dither

a page's own title, a step bigger

Product news, guides, and notes from the team.

start-aligned, title only

narrow container

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/headline
```

Above each section of a landing page, like a bento grid, pricing, or a FAQ.
Put the claim in `title` and the payoff in `muted`, so the eye reads the claim first.
Keep it to one sentence that fits on two lines at 1280px.
Use `as="h1"` only when it is the top of the page and there is no Hero.
Pass texture="dither" for a short, loud title, like two or three words over a dark section.
The headline is set in the theme's `font-headline`. Load Geist Serif as `--font-geist-serif`, like `geist/font/serif/variable` in Next.js, or it falls back to the system serif.

The top of a page with a product preview. Use Hero, which has the bigger size.
Headings inside an app's own screens. Use Section Header.
A long paragraph in `description`. Keep it to two lines, and put the rest in the section.

title
The words that land first, in full ink.
ReactNode
muted
The words that follow in gray, on the same line.
ReactNode
description
A line or two under the headline.
ReactNode
align
Where the text sits.
"center" | "start" · default "center"
as
The heading level. A page has one h1, usually the hero's.
"h1" | "h2" | "h3" · default "h2"
size
"lg" sets the title a step bigger, from 36 to 48px, for a page's own title over its section headlines.
"md" | "lg" · default "md"
texture
"dither" draws the title as dots in the first chart color, with a glow on dark pages. Only this prop turns it on, never a Dither around it.
"flat" | "dither" · default "flat"
className
Extra classes on the root, which holds the container query.
string

Prop	Type	Default	What it does
title	ReactNode	-	The words that land first, in full ink.
muted	ReactNode	-	The words that follow in gray, on the same line.
description	ReactNode	-	A line or two under the headline.
align	"center" \| "start"	"center"	Where the text sits.
as	"h1" \| "h2" \| "h3"	"h2"	The heading level. A page has one h1, usually the hero's.
size	"md" \| "lg"	"md"	"lg" sets the title a step bigger, from 36 to 48px, for a page's own title over its section headlines.
texture	"flat" \| "dither"	"flat"	"dither" draws the title as dots in the first chart color, with a glow on dark pages. Only this prop turns it on, never a Dither around it.
className	string	-	Extra classes on the root, which holds the container query.

It renders a real heading, h2 by default. Pick `as` so the page's heading levels go in order.
The gray part is inside the same heading, so screen readers hear one sentence.
The gray is muted-foreground, which the theme checks at 4.5:1 on the page.
A dithered title keeps its text, so screen readers hear the same sentence. Its dots are the first chart color, which the theme checks at 3:1 on the page, and only a big title should use it.

<Headline title="Start with your people," muted="then organize the week." />

<Headline as="h1" size="lg" align="start" title="The blog." muted="What we ship, and how we work." />

<Headline
  align="start"
  title="Questions people ask."
  description="Can't find yours? Email us and we answer within a day."
/>