Skip to main content
Every text component accepts a content string as a positional argument and supports {{ field }} interpolation. Styles adapt automatically to dark mode.

​
Text Components

Prefab has a text component for every level of the visual hierarchy. They all share the same API: positional content, formatting kwargs (bold, italic, underline, etc.), and css_class for anything else.
ComponentPurpose
H1, H2, H3, H4Headings with decreasing size and weight
Heading(level=n)Dynamic heading level from a variable
PStandard paragraph text
LeadLarger, muted text for introductions
LargeEmphasized text with bolder weight
SmallSmaller text for metadata and fine print
MutedSecondary-color text for less prominent information
TextUnstyled span, the most flexible building block
BlockQuoteIndented border for quotations
MarkdownRenders markdown syntax (bold, links, lists, images)

​
Inline Formatting

​
Modifiers

All text components accept formatting kwargs that compile to Tailwind classes: bold, italic, underline, strikethrough, uppercase, lowercase, and align. Span is the inline formatting primitive. It carries all the same modifiers as Text, plus code for monospace styling and style for inline CSS. Link works the same way but renders as an anchor tag with href. Pass mixed strings, Spans, and Links to Text as positional arguments. Strings auto-wrap as plain spans:

​
API Reference

Common Parameters

All text components share this interface:
​
content
str
required
Text content. Accepts {{ field }} interpolation. Can be passed as a positional argument.
​
bold
bool | None
default:"None"
Bold weight.
​
italic
bool | None
default:"None"
Italic style.
​
underline
bool | None
default:"None"
Underline decoration.
​
strikethrough
bool | None
default:"None"
Strikethrough decoration.
​
uppercase
bool | None
default:"None"
Transform text to uppercase.
​
lowercase
bool | None
default:"None"
Transform text to lowercase.
​
align
"left" | "center" | "right" | "justify" | None
default:"None"
Horizontal text alignment.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Text

Accepts mixed positional args for inline formatting:
Text("plain string")
Text("Click ", Span("here", bold=True), " to continue")

Heading

​
level
int
default:"1"
Heading level: 1 (h1), 2 (h2), 3 (h3), or 4 (h4).

Span

​
code
bool
default:"False"
Render as inline code with monospace font and background.
​
style
dict[str, str] | None
default:"None"
Inline CSS styles as a dict of property/value pairs.

Link

​
href
str
required
URL to navigate to.
​
target
str | None
default:"'_blank'"
Link target: _blank (new tab) or _self (same tab).
​
code
bool
default:"False"
Render as inline code link.
​
style
dict[str, str] | None
default:"None"
Inline CSS styles.

​
Protocol Reference

Text
{
  "type": "Text",
  "content?": "string",
  "children?": [{"type": "Span", "content": "...", "code?": true}],
  "bold?": "boolean",
  "italic?": "boolean",
  "align?": "left | center | right | justify",
  "cssClass?": "string"
}
Heading
{
  "type": "Heading",
  "content": "string (required)",
  "level?": "1 | 2 | 3 | 4",
  "bold?": "boolean",
  "italic?": "boolean",
  "cssClass?": "string"
}
For the complete protocol schema, see Text, Heading, Span, Markdown.