Prose Components
Reusable typography and content components for building documentation pages, blogs, and rich text layouts. All components consume semantic color tokens and adapt to light/dark mode automatically.
ProseTitle
Renders an h1, h2, or h3 with consistent spacing. Use subtitle to add a muted line below the heading.
Page Title
Section Heading
Subsection
Body text rendered as a paragraph with consistent spacing. Use bold or italic inline.
With Subtitle
Optional subtitle below the heading
ProseText
A plain paragraph wrapper with consistent bottom margin. Accepts any inline HTML children.
No additional props beyond class and rest attributes.
ProseCallout
Colored callout box with a left accent border, icon, and optional title.
The content prop supports inline Markdown.
Informational message for the reader.
Something may need your attention here.
The operation completed successfully.
Something went wrong. Check your input.
Here is a helpful tip to improve your workflow.
A general note with neutral styling.
ProseBlockQuote
A stylized pull-quote with an accent-colored left bar and optional author attribution.
ProseLinkCard
An external link rendered as a card with favicon, title, description, and domain. Clicking opens the URL in a new tab.
The best way to predict the future is to invent it.
— Alan Kay
Simplicity is the ultimate sophistication.
Svelte
Cybernetically enhanced web apps. Write less code, no virtual DOM, truly reactive.
svelte.dev
ProseMarkdown
Parses a Markdown string via marked and renders it with
Tailwind Typography prose styles, adapting to dark mode automatically.
Markdown Content
Renders bold, italic, inline code, and links.
- List item one
- List item two
- List item three
Blockquotes are also supported.
const greeting = (name: string) => `Hello, ${name}!`;
ProseYoutubeEmbed
Lazy YouTube embed — shows a thumbnail until clicked, then loads the iframe. Accepts a full watch URL or a bare video ID.