{{ 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.), andcss_class for anything else.
Inline Formatting
Modifiers
All text components accept formatting kwargs that compile to Tailwind classes:bold, italic, underline, strikethrough, uppercase, lowercase, and align.
Span and Link
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:
str
required
Text content. Accepts
{{ field }} interpolation. Can be passed as a positional argument.bool | None
default:"None"
Bold weight.
bool | None
default:"None"
Italic style.
bool | None
default:"None"
Underline decoration.
bool | None
default:"None"
Strikethrough decoration.
bool | None
default:"None"
Transform text to uppercase.
bool | None
default:"None"
Transform text to lowercase.
"left" | "center" | "right" | "justify" | None
default:"None"
Horizontal text alignment.
str | None
default:"None"
Additional Tailwind CSS classes.
Text
Accepts mixed positional args for inline formatting:
Heading
int
default:"1"
Heading level:
1 (h1), 2 (h2), 3 (h3), or 4 (h4).Protocol Reference
Text
Heading