About
A styled wrapper for rendering an article's content — headings, paragraphs, lists, links, inline code, quotes, tables and images — either from raw HTML (e.g. rendered Markdown) or from nested children, spaced and colored like a document.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Prose to your project and fits it to your theme.
Code
How Prose is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Prose from "@/components/ui/prose";
export default function ProseFromHtmlDemo() {
return (
<Prose
className="mx-auto max-w-2xl px-6 py-16"
html='<h2>What is a harness?</h2><p>The part of an agent that gives the model something to work with: it reads your files, runs commands and applies edits. See <a href="#">the agents page</a>.</p><pre><code>opencode run "explain this project"</code></pre>'
/>
);
}
More by joseestevez520
View all
Chart
1
Marquee
Day Strip
File Drop Zone