---
title: Typography
description: Semantic text components styled with shadcn/ui conventions.
icon: font
---

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

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

<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="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgSDEsCiAgICBIMiwKICAgIFAsCiAgICBMZWFkLAogICAgTXV0ZWQsCiAgICBDb2x1bW4sCikKCndpdGggQ29sdW1uKGdhcD00KToKICAgIEgxKCJEYXNoYm9hcmQiKQogICAgTGVhZCgiTW9uaXRvciB5b3VyIGFwcGxpY2F0aW9uIG1ldHJpY3MgYW5kIHBlcmZvcm1hbmNlLiIpCiAgICBQKCJFdmVyeXRoaW5nIHlvdSBuZWVkIHRvIG1hbmFnZSB5b3VyIE1DUCBzZXJ2ZXIsIG9yZ2FuaXplZCBpbiBvbmUgcGxhY2UuIikKICAgIE11dGVkKCJMYXN0IHVwZGF0ZWQgNSBtaW51dGVzIGFnbyIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    H1,
    H2,
    P,
    Lead,
    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>

## Headings

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

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"content":"H1 \u2014 Page Title","type":"H1"},{"content":"H2 \u2014 Section Heading","type":"H2"},{"content":"H3 \u2014 Subsection","type":"H3"},{"content":"H4 \u2014 Detail Heading","type":"H4"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgSDEsCiAgICBIMiwKICAgIEgzLAogICAgSDQsCiAgICBDb2x1bW4sCikKCndpdGggQ29sdW1uKGdhcD00KToKICAgIEgxKCJIMSDigJQgUGFnZSBUaXRsZSIpCiAgICBIMigiSDIg4oCUIFNlY3Rpb24gSGVhZGluZyIpCiAgICBIMygiSDMg4oCUIFN1YnNlY3Rpb24iKQogICAgSDQoIkg0IOKAlCBEZXRhaWwgSGVhZGluZyIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    H1,
    H2,
    H3,
    H4,
    Column,
)

with Column(gap=4):
    H1("H1 — Page Title")
    H2("H2 — Section Heading")
    H3("H3 — Subsection")
    H4("H4 — Detail Heading")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {"content": "H1 \u2014 Page Title", "type": "H1"},
      {"content": "H2 \u2014 Section Heading", "type": "H2"},
      {"content": "H3 \u2014 Subsection", "type": "H3"},
      {"content": "H4 \u2014 Detail Heading", "type": "H4"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

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

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"content":"A comprehensive guide to building MCP applications with FastMCP.","type":"Lead"},{"content":"FastMCP provides a complete toolkit for building and deploying MCP servers. Each component follows shadcn/ui conventions for consistent styling.","type":"P"},{"content":"Key Takeaway: Components compose naturally.","type":"Large"}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    P,
    Lead,
    Large,
    Column,
)

with Column(gap=4):
    Lead("A comprehensive guide to building MCP applications with FastMCP.")
    P("FastMCP provides a complete toolkit for building and deploying MCP servers. Each component follows shadcn/ui conventions for consistent styling.")
    Large("Key Takeaway: Components compose naturally.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "content": "A comprehensive guide to building MCP applications with FastMCP.",
        "type": "Lead"
      },
      {
        "content": "FastMCP provides a complete toolkit for building and deploying MCP servers. Each component follows shadcn/ui conventions for consistent styling.",
        "type": "P"
      },
      {"content": "Key Takeaway: Components compose naturally.", "type": "Large"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

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

<ComponentPreview json={{"view":{"cssClass":"gap-3","type":"Column","children":[{"content":"Terms and conditions apply","type":"Small"},{"content":"Last updated 5 minutes ago","type":"Muted"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgU21hbGwsCiAgICBNdXRlZCwKICAgIENvbHVtbiwKKQoKd2l0aCBDb2x1bW4oZ2FwPTMpOgogICAgU21hbGwoIlRlcm1zIGFuZCBjb25kaXRpb25zIGFwcGx5IikKICAgIE11dGVkKCJMYXN0IHVwZGF0ZWQgNSBtaW51dGVzIGFnbyIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Small,
    Muted,
    Column,
)

with Column(gap=3):
    Small("Terms and conditions apply")
    Muted("Last updated 5 minutes ago")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-3",
    "type": "Column",
    "children": [
      {"content": "Terms and conditions apply", "type": "Small"},
      {"content": "Last updated 5 minutes ago", "type": "Muted"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Block Quotes

<ComponentPreview json={{"view":{"content":"The best way to predict the future is to invent it.","type":"BlockQuote"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQmxvY2tRdW90ZQoKQmxvY2tRdW90ZSgiVGhlIGJlc3Qgd2F5IHRvIHByZWRpY3QgdGhlIGZ1dHVyZSBpcyB0byBpbnZlbnQgaXQuIikK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import BlockQuote

BlockQuote("The best way to predict the future is to invent it.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "content": "The best way to predict the future is to invent it.",
    "type": "BlockQuote"
  }
}
```
</CodeGroup>
</ComponentPreview>

## Inline Code

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

<ComponentPreview json={{"view":{"cssClass":"gap-2 items-center","type":"Row","children":[{"content":"Run","type":"P"},{"content":"pip install prefab-ui","type":"InlineCode"},{"content":"to get started.","type":"P"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgSW5saW5lQ29kZSwKICAgIFAsCiAgICBSb3csCikKCndpdGggUm93KGdhcD0yLCBjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciIpOgogICAgUCgiUnVuIikKICAgIElubGluZUNvZGUoInBpcCBpbnN0YWxsIHByZWZhYi11aSIpCiAgICBQKCJ0byBnZXQgc3RhcnRlZC4iKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    InlineCode,
    P,
    Row,
)

with Row(gap=2, css_class="items-center"):
    P("Run")
    InlineCode("pip install prefab-ui")
    P("to get started.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2 items-center",
    "type": "Row",
    "children": [
      {"content": "Run", "type": "P"},
      {"content": "pip install prefab-ui", "type": "InlineCode"},
      {"content": "to get started.", "type": "P"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## 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. `Text` and `Heading` support the same `bold`, `italic`, and `align` props as the styled components.

```python 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:

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"content":"Regular paragraph text.","type":"P"},{"cssClass":"font-bold","content":"This is bold.","type":"P"},{"cssClass":"italic","content":"This is italic.","type":"P"},{"cssClass":"font-bold italic","content":"Bold and italic combined.","type":"Text"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgUCwKICAgIFRleHQsCiAgICBDb2x1bW4sCikKCndpdGggQ29sdW1uKGdhcD0yKToKICAgIFAoIlJlZ3VsYXIgcGFyYWdyYXBoIHRleHQuIikKICAgIFAoIlRoaXMgaXMgYm9sZC4iLCBib2xkPVRydWUpCiAgICBQKCJUaGlzIGlzIGl0YWxpYy4iLCBpdGFsaWM9VHJ1ZSkKICAgIFRleHQoIkJvbGQgYW5kIGl0YWxpYyBjb21iaW5lZC4iLCBib2xkPVRydWUsIGl0YWxpYz1UcnVlKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    P,
    Text,
    Column,
)

with Column(gap=2):
    P("Regular paragraph text.")
    P("This is bold.", bold=True)
    P("This is italic.", italic=True)
    Text("Bold and italic combined.", bold=True, italic=True)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {"content": "Regular paragraph text.", "type": "P"},
      {"cssClass": "font-bold", "content": "This is bold.", "type": "P"},
      {"cssClass": "italic", "content": "This is italic.", "type": "P"},
      {
        "cssClass": "font-bold italic",
        "content": "Bold and italic combined.",
        "type": "Text"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Alignment

All text components accept an `align` prop to control horizontal text alignment. This compiles to Tailwind's `text-left`, `text-center`, `text-right`, or `text-justify` classes.

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"cssClass":"text-center","content":"Welcome Back","type":"H2"},{"cssClass":"text-center","content":"Your dashboard is ready.","type":"P"},{"cssClass":"text-right","content":"Last login: February 19, 2026","type":"Muted"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgSDIsCiAgICBQLAogICAgTXV0ZWQsCiAgICBDb2x1bW4sCikKCndpdGggQ29sdW1uKGdhcD0yKToKICAgIEgyKCJXZWxjb21lIEJhY2siLCBhbGlnbj0iY2VudGVyIikKICAgIFAoCiAgICAgICAgIllvdXIgZGFzaGJvYXJkIGlzIHJlYWR5LiIsCiAgICAgICAgYWxpZ249ImNlbnRlciIsCiAgICApCiAgICBNdXRlZCgKICAgICAgICAiTGFzdCBsb2dpbjogRmVicnVhcnkgMTksIDIwMjYiLAogICAgICAgIGFsaWduPSJyaWdodCIsCiAgICApCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    H2,
    P,
    Muted,
    Column,
)

with Column(gap=2):
    H2("Welcome Back", align="center")
    P(
        "Your dashboard is ready.",
        align="center",
    )
    Muted(
        "Last login: February 19, 2026",
        align="right",
    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {"cssClass": "text-center", "content": "Welcome Back", "type": "H2"},
      {"cssClass": "text-center", "content": "Your dashboard is ready.", "type": "P"},
      {
        "cssClass": "text-right",
        "content": "Last login: February 19, 2026",
        "type": "Muted"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

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

`H1`, `H2`, `H3`, `H4`, `P`, `Lead`, `Large`, `Small`, `Muted`, `BlockQuote`, `InlineCode` all share this interface:

<ParamField body="content" type="str" required>
  Text content. Can be passed as a positional argument.
</ParamField>

<ParamField body="bold" type="bool | None" default="None">
  Render text in bold weight.
</ParamField>

<ParamField body="italic" type="bool | None" default="None">
  Render text in italic style.
</ParamField>

<ParamField body="align" type='"left" | "center" | "right" | "justify" | None' default="None">
  Horizontal text alignment. Compiles to a Tailwind `text-*` class.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes appended to the component's built-in styles.
</ParamField>
</Card>

<Card icon="code" title="Text Parameters">
<ParamField body="content" type="str" required>
  Text content with `{{ field }}` interpolation. Renders as an unstyled `<p>`.
</ParamField>

<ParamField body="bold" type="bool | None" default="None">
  Render text in bold weight.
</ParamField>

<ParamField body="italic" type="bool | None" default="None">
  Render text in italic style.
</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="Heading Parameters">
<ParamField body="content" type="str" required>
  Heading text with `{{ field }}` interpolation.
</ParamField>

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

<ParamField body="bold" type="bool | None" default="None">
  Render text in bold weight.
</ParamField>

<ParamField body="italic" type="bool | None" default="None">
  Render text in italic style.
</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="Markdown Parameters">
<ParamField body="content" type="str" required>
  Markdown content with `{{ field }}` interpolation. Parses markdown syntax to HTML.
</ParamField>

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

## Protocol Reference

```json Text
{
  "type": "Text",
  "content": "string (required)",
  "bold?": "boolean",
  "italic?": "boolean",
  "align?": "left | center | right | justify",
  "cssClass?": "string"
}
```

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

```json Markdown
{
  "type": "Markdown",
  "content": "string (required)",
  "cssClass?": "string"
}
```

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