Skip to main content
Typography components give you semantic heading and body text styles that follow shadcn/ui conventions — proper font sizes, weights, tracking, and color that automatically adapts to dark mode. Every component accepts a content string as a positional argument and supports {{ field }} interpolation.

​
Basic Usage

​
Headings

Four heading levels with decreasing size and weight. H2 includes a subtle bottom border for section separation.

​
Body Text

P gives you standard paragraph text with comfortable line height. Lead is larger and muted for introductory text, while Large emphasizes key information with bolder weight.

​
Small and Muted Text

Small renders smaller text suited for metadata, while Muted uses the secondary foreground color for less prominent information. Both are useful for timestamps, disclaimers, and supplementary details.

​
Block Quotes

​
Inline Code

Renders text with a monospace font and subtle background, ideal for referencing code within prose.

​
Text and Markdown

Text and Markdown are simpler alternatives to the styled components above. Text renders an unstyled <p>, while Markdown parses and renders markdown syntax. Heading is a parametric heading that takes a level kwarg instead of using separate H1-H4 classes.
Simpler Alternatives
from prefab_ui.components import (
    Text,
    Markdown,
    Heading,
)

Text("Plain paragraph with no default styling.")
Heading("Section Title", level=2)
Markdown("**Bold** and *italic* text with [links](https://example.com).")
These are handy for data-driven UIs where the styling comes from the container rather than the text itself, or when you want exact control via css_class.

​
Bold & Italic

All text components accept bold and italic props for quick emphasis without reaching for CSS classes:

​
API Reference

Styled Text Components

H1, H2, H3, H4, P, Lead, Large, Small, Muted, BlockQuote, InlineCode all share this interface:
​
content
str
required
Text content. Can be passed as a positional argument.
​
bold
bool | None
default:"None"
Render text in bold weight.
​
italic
bool | None
default:"None"
Render text in italic style.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

Text Parameters

​
content
str
required
Text content with {{ field }} interpolation. Renders as an unstyled <p>.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Heading Parameters

​
content
str
required
Heading text with {{ field }} interpolation.
​
level
int
default:"1"
Heading level: 1 (h1), 2 (h2), 3 (h3), or 4 (h4).
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Markdown Parameters

​
content
str
required
Markdown content with {{ field }} interpolation. Parses markdown syntax to HTML.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Text
{
  "type": "Text",
  "content": "string (required)",
  "bold?": "boolean",
  "italic?": "boolean",
  "cssClass?": "string"
}
Heading
{
  "type": "Heading",
  "content": "string (required)",
  "level?": "1 | 2 | 3 | 4",
  "cssClass?": "string"
}
Markdown
{
  "type": "Markdown",
  "content": "string (required)",
  "cssClass?": "string"
}
For the complete protocol schema, see Text, Heading, Markdown.