---
title: Typography
description: Text components for headings, body copy, and inline formatting.
icon: font
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"content":"Dashboard","type":"H1"},{"content":"Monitor your application metrics and performance.","type":"Lead"},{"content":"Everything you need to manage your MCP server, organized in one place.","type":"P"},{"content":"Last updated 5 minutes ago","type":"Muted"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgSDEsIExlYWQsIFAsIE11dGVkLCBDb2x1bW4KCndpdGggQ29sdW1uKGdhcD00KToKICAgIEgxKCJEYXNoYm9hcmQiKQogICAgTGVhZCgiTW9uaXRvciB5b3VyIGFwcGxpY2F0aW9uIG1ldHJpY3MgYW5kIHBlcmZvcm1hbmNlLiIpCiAgICBQKCJFdmVyeXRoaW5nIHlvdSBuZWVkIHRvIG1hbmFnZSB5b3VyIE1DUCBzZXJ2ZXIsIG9yZ2FuaXplZCBpbiBvbmUgcGxhY2UuIikKICAgIE11dGVkKCJMYXN0IHVwZGF0ZWQgNSBtaW51dGVzIGFnbyIpCg">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import H1, Lead, P, Muted, Column

with Column(gap=4):
    H1("Dashboard")
    Lead("Monitor your application metrics and performance.")
    P("Everything you need to manage your MCP server, organized in one place.")
    Muted("Last updated 5 minutes ago")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {"content": "Dashboard", "type": "H1"},
      {"content": "Monitor your application metrics and performance.", "type": "Lead"},
      {
        "content": "Everything you need to manage your MCP server, organized in one place.",
        "type": "P"
      },
      {"content": "Last updated 5 minutes ago", "type": "Muted"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## 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.

| Component | Purpose |
|-----------|---------|
| `H1`, `H2`, `H3`, `H4` | Headings with decreasing size and weight |
| `Heading(level=n)` | Dynamic heading level from a variable |
| `P` | Standard paragraph text |
| `Lead` | Larger, muted text for introductions |
| `Large` | Emphasized text with bolder weight |
| `Small` | Smaller text for metadata and fine print |
| `Muted` | Secondary-color text for less prominent information |
| `Text` | Unstyled span, the most flexible building block |
| `BlockQuote` | Indented border for quotations |
| `Markdown` | Renders markdown syntax (bold, links, lists, images) |

<ComponentPreview json={{"view":{"cssClass":"gap-3","type":"Column","children":[{"content":"Page Title","type":"H1"},{"content":"Section Heading","type":"H2"},{"content":"Subsection","type":"H3"},{"content":"Introductory text that sets context for what follows.","type":"Lead"},{"content":"Standard paragraph text for the main content of your UI.","type":"P"},{"content":"Key Takeaway: Components compose naturally.","type":"Large"},{"content":"Terms and conditions apply","type":"Small"},{"content":"Last updated 5 minutes ago","type":"Muted"},{"content":"The best way to predict the future is to invent it.","type":"BlockQuote"}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import H1, H2, H3, P, Lead, Large, Small, Muted, BlockQuote, Column

with Column(gap=3):
    H1("Page Title")
    H2("Section Heading")
    H3("Subsection")
    Lead("Introductory text that sets context for what follows.")
    P("Standard paragraph text for the main content of your UI.")
    Large("Key Takeaway: Components compose naturally.")
    Small("Terms and conditions apply")
    Muted("Last updated 5 minutes ago")
    BlockQuote("The best way to predict the future is to invent it.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-3",
    "type": "Column",
    "children": [
      {"content": "Page Title", "type": "H1"},
      {"content": "Section Heading", "type": "H2"},
      {"content": "Subsection", "type": "H3"},
      {
        "content": "Introductory text that sets context for what follows.",
        "type": "Lead"
      },
      {
        "content": "Standard paragraph text for the main content of your UI.",
        "type": "P"
      },
      {"content": "Key Takeaway: Components compose naturally.", "type": "Large"},
      {"content": "Terms and conditions apply", "type": "Small"},
      {"content": "Last updated 5 minutes ago", "type": "Muted"},
      {
        "content": "The best way to predict the future is to invent it.",
        "type": "BlockQuote"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Inline Formatting

### Modifiers

All text components accept formatting kwargs that compile to Tailwind classes: `bold`, `italic`, `underline`, `strikethrough`, `uppercase`, `lowercase`, and `align`.

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"cssClass":"font-bold","content":"Bold text","type":"Text"},{"cssClass":"italic","content":"Italic text","type":"Text"},{"cssClass":"underline","content":"Underlined","type":"Text"},{"cssClass":"line-through","content":"Strikethrough","type":"Text"},{"cssClass":"uppercase","content":"UPPERCASE","type":"Text"},{"cssClass":"text-center","content":"Centered","type":"Text"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgVGV4dCwgQ29sdW1uCgp3aXRoIENvbHVtbihnYXA9Mik6CiAgICBUZXh0KCJCb2xkIHRleHQiLCBib2xkPVRydWUpCiAgICBUZXh0KCJJdGFsaWMgdGV4dCIsIGl0YWxpYz1UcnVlKQogICAgVGV4dCgiVW5kZXJsaW5lZCIsIHVuZGVybGluZT1UcnVlKQogICAgVGV4dCgiU3RyaWtldGhyb3VnaCIsIHN0cmlrZXRocm91Z2g9VHJ1ZSkKICAgIFRleHQoIlVQUEVSQ0FTRSIsIHVwcGVyY2FzZT1UcnVlKQogICAgVGV4dCgiQ2VudGVyZWQiLCBhbGlnbj0iY2VudGVyIikK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Text, Column

with Column(gap=2):
    Text("Bold text", bold=True)
    Text("Italic text", italic=True)
    Text("Underlined", underline=True)
    Text("Strikethrough", strikethrough=True)
    Text("UPPERCASE", uppercase=True)
    Text("Centered", align="center")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {"cssClass": "font-bold", "content": "Bold text", "type": "Text"},
      {"cssClass": "italic", "content": "Italic text", "type": "Text"},
      {"cssClass": "underline", "content": "Underlined", "type": "Text"},
      {"cssClass": "line-through", "content": "Strikethrough", "type": "Text"},
      {"cssClass": "uppercase", "content": "UPPERCASE", "type": "Text"},
      {"cssClass": "text-center", "content": "Centered", "type": "Text"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

### 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:

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"type":"Text","children":[{"content":"Click ","code":false,"type":"Span"},{"cssClass":"font-bold underline","content":"here","code":false,"type":"Span"},{"content":" to continue","code":false,"type":"Span"}]},{"type":"Text","children":[{"content":"Price: ","code":false,"type":"Span"},{"cssClass":"line-through","content":"$9.99","code":false,"type":"Span"},{"content":" ","code":false,"type":"Span"},{"cssClass":"font-bold","content":"$4.99","code":false,"type":"Span"}]},{"type":"Text","children":[{"content":"Run ","code":false,"type":"Span"},{"cssClass":"font-mono","content":"pip install prefab-ui","code":true,"type":"Span"},{"content":" to get started","code":false,"type":"Span"}]},{"type":"Text","children":[{"content":"Read the ","code":false,"type":"Span"},{"content":"documentation","code":false,"type":"Link","href":"https://prefab.prefect.io","target":"_blank"},{"content":" for more","code":false,"type":"Span"}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Text, Span, Link, Column

with Column(gap=2):
    Text("Click ", Span("here", bold=True, underline=True), " to continue")
    Text("Price: ", Span("$9.99", strikethrough=True), " ", Span("$4.99", bold=True))
    Text("Run ", Span("pip install prefab-ui", code=True), " to get started")
    Text("Read the ", Link("documentation", href="https://prefab.prefect.io"), " for more")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {
        "type": "Text",
        "children": [
          {"content": "Click ", "code": false, "type": "Span"},
          {
            "cssClass": "font-bold underline",
            "content": "here",
            "code": false,
            "type": "Span"
          },
          {"content": " to continue", "code": false, "type": "Span"}
        ]
      },
      {
        "type": "Text",
        "children": [
          {"content": "Price: ", "code": false, "type": "Span"},
          {"cssClass": "line-through", "content": "$9.99", "code": false, "type": "Span"},
          {"content": " ", "code": false, "type": "Span"},
          {"cssClass": "font-bold", "content": "$4.99", "code": false, "type": "Span"}
        ]
      },
      {
        "type": "Text",
        "children": [
          {"content": "Run ", "code": false, "type": "Span"},
          {
            "cssClass": "font-mono",
            "content": "pip install prefab-ui",
            "code": true,
            "type": "Span"
          },
          {"content": " to get started", "code": false, "type": "Span"}
        ]
      },
      {
        "type": "Text",
        "children": [
          {"content": "Read the ", "code": false, "type": "Span"},
          {
            "content": "documentation",
            "code": false,
            "type": "Link",
            "href": "https://prefab.prefect.io",
            "target": "_blank"
          },
          {"content": " for more", "code": false, "type": "Span"}
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Common Parameters">

All text components share this interface:

<ParamField body="content" type="str" required>
  Text content. Accepts `{{ field }}` interpolation. Can be passed as a positional argument.
</ParamField>

<ParamField body="bold" type="bool | None" default="None">
  Bold weight.
</ParamField>

<ParamField body="italic" type="bool | None" default="None">
  Italic style.
</ParamField>

<ParamField body="underline" type="bool | None" default="None">
  Underline decoration.
</ParamField>

<ParamField body="strikethrough" type="bool | None" default="None">
  Strikethrough decoration.
</ParamField>

<ParamField body="uppercase" type="bool | None" default="None">
  Transform text to uppercase.
</ParamField>

<ParamField body="lowercase" type="bool | None" default="None">
  Transform text to lowercase.
</ParamField>

<ParamField body="align" type='"left" | "center" | "right" | "justify" | None' default="None">
  Horizontal text alignment.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="Text">

Accepts mixed positional args for inline formatting:

```python
Text("plain string")
Text("Click ", Span("here", bold=True), " to continue")
```

</Card>

<Card icon="code" title="Heading">
<ParamField body="level" type="int" default="1">
  Heading level: `1` (h1), `2` (h2), `3` (h3), or `4` (h4).
</ParamField>
</Card>

<Card icon="code" title="Span">
<ParamField body="code" type="bool" default="False">
  Render as inline code with monospace font and background.
</ParamField>
<ParamField body="style" type="dict[str, str] | None" default="None">
  Inline CSS styles as a dict of property/value pairs.
</ParamField>
</Card>

<Card icon="code" title="Link">
<ParamField body="href" type="str" required>
  URL to navigate to.
</ParamField>
<ParamField body="target" type="str | None" default="'_blank'">
  Link target: `_blank` (new tab) or `_self` (same tab).
</ParamField>
<ParamField body="code" type="bool" default="False">
  Render as inline code link.
</ParamField>
<ParamField body="style" type="dict[str, str] | None" default="None">
  Inline CSS styles.
</ParamField>
</Card>

## Protocol Reference

```json Text
{
  "type": "Text",
  "content?": "string",
  "children?": [{"type": "Span", "content": "...", "code?": true}],
  "bold?": "boolean",
  "italic?": "boolean",
  "align?": "left | center | right | justify",
  "cssClass?": "string"
}
```

```json Heading
{
  "type": "Heading",
  "content": "string (required)",
  "level?": "1 | 2 | 3 | 4",
  "bold?": "boolean",
  "italic?": "boolean",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Text](/protocol/text), [Heading](/protocol/heading), [Span](/protocol/span), [Markdown](/protocol/markdown).
