---
title: Prose
description: A component that renders rich HTML content with automatic typography styling using the prose class
---

```tsx
import { Prose } from '@/ui/Prose';

export function ProseDemo() {
  const htmlContent = `
    <h2>Welcome to Prose</h2>
    <p>The Prose component renders rich HTML content with automatic typography styling.</p>
    <ul>
      <li>Supports all standard HTML elements</li>
      <li>Applies beautiful default styles</li>
      <li>Perfect for blog posts and articles</li>
    </ul>
  `;

  return <Prose text={htmlContent} className="max-w-prose" />;
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/prose.json
```

Or manually, copy the following code into `/ui/prose.tsx`:

```tsx
import clsx from 'clsx';
import { type ComponentPropsWithoutRef, forwardRef } from 'react';

export interface ProseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  text: string;
}

export const Prose = forwardRef<HTMLDivElement, ProseProps>(function Prose(
  { className, text, ...attrs },
  ref,
) {
  if (!text) {
    return null;
  }

  return (
    <div
      {...attrs}
      className={clsx(className, 'prose')}
      dangerouslySetInnerHTML={{ __html: text }}
      ref={ref}
    />
  );
});
```

## Usage

```tsx showLineNumbers
import { Prose } from '@/docs/lib/ui/prose';

export function Component() {
  const htmlContent = `
    <h2>Article Title</h2>
    <p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>
  `;

  return <Prose text={htmlContent} className="max-w-prose" />;
}
```

## API Reference

### Prose

| Prop        | Type     | Default     | Description                                                                                      |
| ----------- | -------- | ----------- | ------------------------------------------------------------------------------------------------ |
| `text`      | `string` | (required)  | HTML string to render. Returns null if empty. Content is rendered using dangerouslySetInnerHTML. |
| `className` | `string` | `undefined` | Additional CSS classes to apply. The "prose" class is always applied automatically.              |

The component also accepts all standard HTML div attributes via `ComponentPropsWithoutRef<"div">`.

## Notes

- **HTML Rendering**: The component uses `dangerouslySetInnerHTML` to render the HTML content. Ensure the `text` prop contains safe, sanitized HTML to prevent XSS attacks.
- **Prose Styling**: The component automatically applies the `prose` class, which typically provides beautiful typography defaults for rendered HTML content (commonly used with Tailwind's typography plugin).
- **Empty Text**: If the `text` prop is empty or falsy, the component returns `null` and renders nothing.
- **Ref Forwarding**: The component forwards refs to the underlying div element, allowing parent components to access the DOM node.
- **Custom Styling**: You can pass additional classes via `className` to customize the appearance or constrain the width (e.g., `max-w-prose` for optimal reading width).
- **Standard Attributes**: All standard HTML div attributes (like `id`, `data-*`, `aria-*`) can be passed and will be forwarded to the div element.
- **Use Cases**: Perfect for rendering blog posts, articles, documentation, CMS content, or any rich text content that includes formatted HTML.