Prose

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

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

Usage

Copyimport { 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

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.