# Prose

> Styles for an article body: headings, paragraphs, lists, links, code, quotes and tables on the Facade type scale. Wrap rendered markdown or hand-written HTML in it.

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

## Install

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

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

Files: `components/ui/prose.tsx`

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

## Usage

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

```tsx
import { Prose } from "@/components/ui/prose"

export function Demo() {
  return (
    <Prose className="max-w-2xl">
      <h2>Install the tokens</h2>
      <p>
        Every section reads the same design tokens. Add them once, then import the file in
        your global stylesheet. See <a href="#theming">theming</a> for the presets.
      </p>
      {/* Focusable, because it scrolls sideways on a narrow screen. */}
      <pre tabIndex={0} role="region" aria-label="Install command">
        <code>npx shadcn@latest add @facade/tokens</code>
      </pre>
      <h3>What you get</h3>
      <ul>
        <li>
          shadcn colour names, so <code>bg-primary</code> means what it always did
        </li>
        <li>Display sizes, section spacing and motion timings</li>
      </ul>
      <blockquote>
        <p>A token that fails contrast fails the build, not the visitor.</p>
      </blockquote>
      <table>
        <thead>
          <tr>
            <th>Token</th>
            <th>Used for</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <code>--input</code>
            </td>
            <td>Field borders, at 3:1 or better</td>
          </tr>
          <tr>
            <td>
              <code>--ring</code>
            </td>
            <td>The focus ring</td>
          </tr>
        </tbody>
      </table>
    </Prose>
  )
}
```

## Props

### ProseProps

Extends ComponentPropsWithoutRef<"div">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"div" \| "article" \| "section"` | `"div"` | The element to render. Use `article` when it is the whole article. |