# Eyebrow

> The small label above a section heading. It is a paragraph, not a heading.

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

## Install

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

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

Files: `components/ui/eyebrow.tsx`

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

## Usage

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

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

export function Demo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-2">
        <Eyebrow>Platform</Eyebrow>
        <Heading level={2} className="text-display-sm font-semibold">
          One place for everything
        </Heading>
      </div>
      <div className="flex flex-col gap-2">
        <Eyebrow tone="primary">Changelog</Eyebrow>
        <Heading level={2} className="text-display-sm font-semibold">
          Shipped this week
        </Heading>
      </div>
    </div>
  )
}
```

## Props

### EyebrowProps

Extends Omit<ComponentPropsWithoutRef<"p">, "children">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"p" \| "span" \| "div"` | `"p"` |  |
| `tone` | `"muted" \| "primary" \| "foreground"` | `"muted"` | `muted` is the default; `primary` leads with a tick in the brand colour. |
| `children` | `ReactNode` |  |  |