UI Showcase
Component primitives and design token surfaces
Typography
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Styles
This is a regular paragraph with default styling. It uses leading-7 for comfortable line height.
This is a lead paragraph, used for introductory text below page titles.
Large text for emphasis.
Small muted text for secondary information.
This is a blockquote. It uses a left border and italic styling.
Kbd
EscEnterCtrlCCmdK
Prose (Content Typography)
Prose Heading 2
Content inside a prose wrapper gets automatic typography from @tailwindcss/typography. This is how MDX content renders. Headings, paragraphs, lists, blockquotes, and code all get consistent styling without manual classes.
Prose Heading 3
- Unordered list items are styled automatically
- No need for manual list-disc or margin classes
- Nested lists and spacing just work
Prose Heading 4
- Ordered lists get numbers
- Consistent spacing between items
Blockquotes inside prose get border-left and italic styling automatically.
Inline code and bold text and italic text andlinks all work inside prose.
Horizontal rules, tables, and other elements are also styled by the prose plugin.
| Element | Styled by |
|---|---|
| Headings | prose (font-size, weight, margin) |
| Paragraphs | prose (margin, line-height) |
| Lists | prose (bullets, numbers, spacing) |
| Code blocks | MdPre (custom, opted out of prose) |