Blocks Gallery

Registry-generated copy-paste blocks — live preview + Kida macro call for every public component.

Showing 379 blocks · 211 live previews

accordion

Accordion component

interactive stable available
How do I sign up?
Click the Sign Up button and follow the steps.
How do I reset my password?
Use the Forgot Password link on the login page.
Copy-paste
{% from "chirpui/accordion.html" import accordion, accordion_item %}

{% call accordion(name="faq") %}
    {% call accordion_item("How do I sign up?", open=true) %}
        Click the Sign Up button and follow the steps.
    {% end %}
    {% call accordion_item("How do I reset my password?") %}
        Use the Forgot Password link on the login page.
    {% end %}
{% end %}

action-bar

Action Bar component

control stable available
Copy-paste
{% from "chirpui/action_bar.html" import action_bar, action_bar_item %}

{% call action_bar() %}
    {% call action_bar_item(icon="up", label="Vote up", count=42) %}{% end %}
    {% call action_bar_item(icon="comment", label="Comment", count=12) %}{% end %}
    {% call action_bar_item(icon="share", label="Share") %}{% end %}
{% end %}

action-strip

Action Strip component

control stable available
Content
Copy-paste
{% from "chirpui/action_strip.html" import action_strip %}

{% call action_strip() %}
    {{ btn("Validate", variant="", icon="◎", ...) }}
    {{ btn("Migrate", href="/migrate", ...) }}
{% end %}

{% call action_strip(density="sm", wrap="scroll") %}
    {% slot primary %}
    {{ search_bar("q", variant="with-button") }}
    {% end %}
    {% slot controls %}
    {{ btn("Filters", variant="", size="sm") }}
    {% end %}
    {% slot actions %}
    {{ btn("Create", variant="primary", size="sm") }}
    {% end %}
{% end %}

actions

layout stable preferred

Preview unavailable: Template 'chirpui/actions.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/actions.html" import actions %}

{{ actions() }}

advanced-params

Parameter override controls

form stable available
Advanced parameters
Content
Copy-paste
{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

alert

Alert component

feedback stable available
Variants: info (default), success, warning, error
Copy-paste
{% from "chirpui/alert.html" import alert %}

    {% call alert(variant="success") %}
        Done! Your changes have been saved.
    {% end %}

    {% call alert(variant="error", dismissible=true) %}
        Something went wrong.
        {% slot header_actions %}<button>Retry</button>{% end %}
    {% end %}

    {% call alert(variant="warning", collapsible=true, open=false, icon="↑", title="Shortcut collisions") %}
        Long warning content revealed on expand.
    {% end %}

Variants: info (default), success, warning, error

ambient

effect experimental available

Preview unavailable: Template 'chirpui/ambient.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ambient.html" import ambient %}

{{ ambient() }}

ambient-root

effect experimental available

Preview unavailable: Template 'chirpui/ambient_root.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ambient_root.html" import ambient_root %}

{{ ambient_root() }}

animated-counter

Animated Counter

effect experimental available
Active Users
$M
Revenue
Copy-paste
{% from "chirpui/animated_counter.html" import animated_counter %}

{{ animated_counter(1250, label="Active Users") }}
{{ animated_counter(99, prefix="$", suffix="M", label="Revenue", variant="mono") }}

animated-stat-card

Animated Stat Card

data-display stable available
Active Users
↑ +12%
$M
Revenue
Copy-paste
{% from "chirpui/animated_stat_card.html" import animated_stat_card %}

{{ animated_stat_card(1250, label="Active Users", trend="+12%", trend_direction="up") }}
{{ animated_stat_card(48, label="Revenue", prefix="$", suffix="M", effect="beam") }}

answer-card

Forum and social pattern assets

social experimental available
Answer
Copy-paste
{% from "chirpui/forum_patterns.html" import answer_card %}

{% call answer_card() %}
  Content
{% end %}

app-shell

App Shell component

layout stable available
Content
Copy-paste
import app_shell plus shell_outlet
provide brand / topbar / topbar_end / sidebar slots
fill topbar_leading for a non-anchor leading affordance (hamburger/back/
menu) — it escapes the brand-anchor trap, so put interactive controls
there, never inside the brand slot (which nests inside the brand <a>)
wrap the main slot with shell_outlet() for routed shells
enable sidebar_collapsible=true for the resizable shell variant
enable context_rail=true and fill the context_rail slot for the rail
enable nav_drawer=true for the mobile hamburger slide-over

ascii

ascii experimental available

Preview unavailable: Template 'chirpui/ascii.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii.html" import ascii %}

{{ ascii() }}

ascii-7seg

ASCII 7-Segment Display

ascii stable available
9 9 . 9 7
UPTIME 1 2 3 4
0 8 : 4 2
Renders each character as a tall monospace glyph in a display frame. Supports: 0-9, colon, period, dash, space. Variants: default, accent, success, warning, error.
Copy-paste
{% from "chirpui/ascii_7seg.html" import ascii_7seg %}

    {{ ascii_7seg("99.97") }}
    {{ ascii_7seg("1234", label="UPTIME") }}
    {{ ascii_7seg("08:42", variant="accent") }}

Renders each character as a tall monospace glyph in a display frame.
Supports: 0-9, colon, period, dash, space.
Variants: default, accent, success, warning, error.

ascii-badge

ASCII Badge

ascii stable available
Copy-paste
{% from "chirpui/ascii_badge.html" import ascii_badge %}

{{ ascii_badge(text="deployed")                              {# ┤ deployed ├ }}

ascii-border

ASCII Border

ascii stable available

Content in a terminal-style frame

Double-line frame

Rounded corners with a glyph accent

Variants: single (default), double, rounded, heavy
Copy-paste
{% from "chirpui/ascii_border.html" import ascii_border %}

    {% call ascii_border() %}
        <p>Content in a terminal-style frame</p>
    {% end %}

    {% call ascii_border(variant="double") %}
        <h2>Double-line frame</h2>
    {% end %}

    {% call ascii_border(variant="rounded", glyph="✦") %}
        <p>Rounded corners with a glyph accent</p>
    {% end %}

Variants: single (default), double, rounded, heavy

ascii-breaker-panel

ASCII Breaker Panel

ascii stable available
Services
With master switch (controls all):
Production
Variants: default, heavy, double. Size: sm, md (default). Visual: ╔══════════════════════╗ ║ PRODUCTION SYSTEMS ║ ╠══════════════════════╣ ║ ┌───┐ ┌───┐ ┌───┐ ║ ║ │███│ │███│ │░░░│ ║ ║ │███│ │███│ │░░░│ ║ ║ │░░░│ │░░░│ │███│ ║ ║ │░░░│ │░░░│ │███│ ║ ║ └───┘ └───┘ └───┘ ║ ║ API DB Cache ║ ║ ■ ON ■ ON ■ OFF ║ ╚══════════════════════╝
Copy-paste
{% from "chirpui/ascii_breaker_panel.html" import breaker_panel, breaker %}

    {% call breaker_panel(title="Services") %}
        {{ breaker("api", label="API", checked=true, variant="success") }}
        {{ breaker("db", label="DB", checked=true, variant="success") }}
        {{ breaker("cache", label="Cache", variant="danger") }}
        {{ breaker("queue", label="Queue") }}
    {% end %}

    With master switch (controls all):
    {% call breaker_panel(title="Production", master="main_power") %}
        {{ breaker("web", label="Web", checked=true) }}
        {{ breaker("worker", label="Worker", checked=true) }}
    {% end %}

Variants: default, heavy, double.
Size: sm, md (default).

Visual:
    ╔══════════════════════╗
    ║  PRODUCTION SYSTEMS  ║
    ╠══════════════════════╣
    ║  ┌───┐ ┌───┐ ┌───┐  ║
    ║  │███│ │███│ │░░░│  ║
    ║  │███│ │███│ │░░░│  ║
    ║  │░░░│ │░░░│ │███│  ║
    ║  │░░░│ │░░░│ │███│  ║
    ║  └───┘ └───┘ └───┘  ║
    ║   API    DB   Cache  ║
    ║  ■ ON  ■ ON  ■ OFF  ║
    ╚══════════════════════╝

ascii-card

ASCII Card

ascii stable available

All systems operational.

Last deploy: 2 hours ago

Borderless content area

Variants: single (default), double, rounded, heavy. Visual: ╭─── Status ──────────╮ │ │ │ All systems │ │ operational. │ │ │ ╰──────────────────────╯
Copy-paste
{% from "chirpui/ascii_card.html" import ascii_card %}

    {% call ascii_card(title="Status") %}
        <p>All systems operational.</p>
    {% end %}

    {% call ascii_card(title="Deploy", variant="double", glyph="◆") %}
        <p>Last deploy: 2 hours ago</p>
    {% end %}

    {% call ascii_card() %}
        <p>Borderless content area</p>
    {% end %}

Variants: single (default), double, rounded, heavy.

Visual:
    ╭─── Status ──────────╮
    │                      │
    │ All systems           │
    │ operational.          │
    │                      │
    ╰──────────────────────╯

ascii-checkbox

ASCII Checkbox

ascii stable available
Options
Variants: default, accent, success, danger.
Copy-paste
{% from "chirpui/ascii_checkbox.html" import ascii_checkbox, ascii_checkbox_group %}

    {{ ascii_checkbox("terms", label="Accept terms") }}
    {{ ascii_checkbox("notify", label="Email notifications", checked=true) }}

    {% call ascii_checkbox_group(legend="Options") %}
        {{ ascii_checkbox("opt_a", label="Enable logging") }}
        {{ ascii_checkbox("opt_b", label="Verbose output", checked=true) }}
        {{ ascii_checkbox("opt_c", label="Auto-restart") }}
    {% end %}

Variants: default, accent, success, danger.

ascii-checkbox-group

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_checkbox_group.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_checkbox_group.html" import ascii_checkbox_group %}

{{ ascii_checkbox_group() }}

ascii-divider

ASCII Divider

ascii stable available
Copy-paste
{% from "chirpui/ascii_divider.html" import ascii_divider %}

{{ ascii_divider()                        {# ──────────────────── }}

ascii-empty

ASCII Empty State component

ascii stable available

Nothing here

Content
Copy-paste
{% from "chirpui/ascii_empty.html" import ascii_empty %}

    {% call ascii_empty() %}{% end %}
    {% end %}

    {% call ascii_empty(glyph="~", heading="No results", description="Try a different search.", variant="muted") %}
        <button class="chirpui-button">Reset filters</button>
    {% end %}

Variants: default, muted, accent

ascii-error

ASCII Error Page

ascii stable available
404

Page not found

The page you're looking for doesn't exist or has been moved.

500

Something broke

We're looking into it.

Codes: 404, 403, 500, 503, timeout, empty
Copy-paste
{% from "chirpui/ascii_error.html" import ascii_error %}

    {% call ascii_error(code="404") %}
        <a href="/">Go home</a>
    {% end %}

    {% call ascii_error(code="500", heading="Something broke", description="We're looking into it.") %}
    {% end %}

Codes: 404, 403, 500, 503, timeout, empty

ascii-fader

ASCII Fader / Slider

ascii stable available
VOL 75
BASS 40
CH1 80
CH2 60
CH3 30
CH4 90
Variants: default, accent, success, warning, danger. value: 0-100 (maps to 8 block levels).
Copy-paste
{% from "chirpui/ascii_fader.html" import ascii_fader, fader_bank %}

    {{ ascii_fader("volume", value=75, label="VOL") }}
    {{ ascii_fader("bass", value=40, label="BASS", variant="accent") }}

    {% call fader_bank() %}
        {{ ascii_fader("ch1", value=80, label="CH1") }}
        {{ ascii_fader("ch2", value=60, label="CH2") }}
        {{ ascii_fader("ch3", value=30, label="CH3") }}
        {{ ascii_fader("ch4", value=90, label="CH4") }}
    {% end %}

Variants: default, accent, success, warning, danger.
value: 0-100 (maps to 8 block levels).

ascii-fader-bank

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_fader_bank.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_fader_bank.html" import ascii_fader_bank %}

{{ ascii_fader_bank() }}

ascii-fill

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_fill.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_fill.html" import ascii_fill %}

{{ ascii_fill() }}

ascii-fill-hover

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_fill_hover.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_fill_hover.html" import ascii_fill_hover %}

{{ ascii_fill_hover() }}

ascii-indicator

ASCII Indicator Light

ascii stable available
online error standby
PWR NET ERR SYS
Rows wrap by default for responsive layouts. Use indicator_row(nowrap=true) for a single-line strip. Variants: success, warning, error, muted, accent. Blink: true (steady pulse), "fast" (alarm), false (solid). Glyph: ■ (default), ● (round), ◆ (diamond).
Copy-paste
{% from "chirpui/ascii_indicator.html" import indicator, indicator_row %}

    {{ indicator("online", variant="success", blink=true) }}
    {{ indicator("error", variant="error", blink="fast") }}
    {{ indicator("standby", variant="muted") }}

    {% call indicator_row() %}
        {{ indicator("PWR", variant="success", blink=true) }}
        {{ indicator("NET", variant="success") }}
        {{ indicator("ERR", variant="error", blink="fast") }}
        {{ indicator("SYS", variant="warning", blink=true) }}
    {% end %}

Rows wrap by default for responsive layouts. Use indicator_row(nowrap=true) for a single-line strip.

Variants: success, warning, error, muted, accent.
Blink: true (steady pulse), "fast" (alarm), false (solid).
Glyph: ■ (default), ● (round), ◆ (diamond).

ascii-indicator-row

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_indicator_row.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_indicator_row.html" import ascii_indicator_row %}

{{ ascii_indicator_row() }}

ascii-knob

ASCII Knob / Rotary Selector

ascii stable available
Mode
The knob renders as a circular dial with a pointer: ╭─╮ │◉│ ← current position indicator ╰─╯ Options are displayed as radio buttons styled as dial positions.
Copy-paste
{% from "chirpui/ascii_knob.html" import ascii_knob %}

    {{ ascii_knob("volume", options=["Off", "Low", "Med", "High"], selected="Med") }}
    {{ ascii_knob("mode", options=["A", "B", "C"], selected="A", label="Mode") }}

The knob renders as a circular dial with a pointer:
    ╭─╮
    │◉│  ← current position indicator
    ╰─╯
Options are displayed as radio buttons styled as dial positions.

ascii-modal

ASCII Modal

ascii stable available
Settings

Modal body content.

Variants: single (default), double, heavy. Visual: ╔══════════════════════╗ ║ Settings [×] ║ ╠══════════════════════╣ ║ Content ║ ╚══════════════════════╝
Copy-paste
{% from "chirpui/ascii_modal.html" import ascii_modal, ascii_modal_trigger %}

    {{ ascii_modal_trigger("settings", label="Settings") }}

    {% call ascii_modal("settings", title="Settings") %}
        <p>Modal body content.</p>
    {% end %}

Variants: single (default), double, heavy.

Visual:
    ╔══════════════════════╗
    ║  Settings       [×]  ║
    ╠══════════════════════╣
    ║ Content              ║
    ╚══════════════════════╝

ascii-modal-trigger

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_modal_trigger.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_modal_trigger.html" import ascii_modal_trigger %}

{{ ascii_modal_trigger() }}

ascii-progress

ASCII Progress

ascii stable available
75%
Loading 40%
100%
Values: 0-100 (percentage)
Copy-paste
{% from "chirpui/ascii_progress.html" import ascii_progress %}

    {{ ascii_progress(value=75) }}
    {{ ascii_progress(value=40, variant="accent", label="Loading") }}
    {{ ascii_progress(value=100, variant="success") }}

Values: 0-100 (percentage)

ascii-radio

ascii experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_ascii_radio() missing 2 required positional arguments: 'name' and 'value' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/ascii_radio.html" import ascii_radio %}  4 |   |

Copy-paste
{% from "chirpui/ascii_radio.html" import ascii_radio %}

{{ ascii_radio() }}

ascii-radio-group

ASCII Radio

ascii stable available
Priority
Variants: default, accent. Layout: vertical (default), horizontal.
Copy-paste
{% from "chirpui/ascii_radio.html" import ascii_radio_group, ascii_radio %}

    {% call ascii_radio_group("priority", legend="Priority") %}
        {{ ascii_radio("priority", "low", label="Low") }}
        {{ ascii_radio("priority", "med", label="Medium", checked=true) }}
        {{ ascii_radio("priority", "high", label="High") }}
    {% end %}

Variants: default, accent.
Layout: vertical (default), horizontal.

ascii-skeleton

ASCII Skeleton

ascii stable available
Copy-paste
{% from "chirpui/ascii_skeleton.html" import ascii_skeleton %}

{{ ascii_skeleton()                                  {# Single line }}

ascii-sparkline

ASCII Sparkline

ascii stable available
Values are normalized to 1-8 range automatically.
Copy-paste
{% from "chirpui/ascii_sparkline.html" import ascii_sparkline %}

    {{ ascii_sparkline(values=[1, 3, 5, 7, 4, 2, 6]) }}
    {{ ascii_sparkline(values=[2, 8, 4, 6], variant="accent") }}
    {{ ascii_sparkline(values=[1, 2, 3, 4, 5, 6, 7, 8], variant="gradient") }}

Values are normalized to 1-8 range automatically.

ascii-spinner

ASCII Spinner component

ascii stable available
Copy-paste
{% from "chirpui/ascii_spinner.html" import ascii_spinner %}

{{ ascii_spinner()                              # Braille spinner (default) }}
{{ ascii_spinner(charset="box")                 # Box corners spinner }}
{{ ascii_spinner(charset="arrows", size="lg")   # Large arrow spinner }}
{{ ascii_spinner(charset="dots", label="Loading data...") }}

ascii-stepper

ASCII Stepper

ascii stable available
current: 0-based index of active step. Steps before are complete, after are pending. Variants: default, accent, success. Visual: [✓]───[✓]───[●]───[○]───[○] Build Test Deploy Review Done
Copy-paste
{% from "chirpui/ascii_stepper.html" import ascii_stepper %}

    {{ ascii_stepper(steps=["Build", "Test", "Deploy"], current=1) }}
    {{ ascii_stepper(steps=["Init", "Config", "Review", "Done"], current=2, variant="success") }}

current: 0-based index of active step. Steps before are complete, after are pending.
Variants: default, accent, success.

Visual:
    [✓]───[✓]───[●]───[○]───[○]
    Build  Test  Deploy Review Done

ascii-switch

ASCII Toggle

ascii stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_ascii_switch() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/ascii_toggle.html" import ascii_switch %}  4 |   |

Copy-paste
{% from "chirpui/ascii_toggle.html" import ascii_switch %}

{{ ascii_switch() }}

ascii-tab

ASCII Tabs

ascii stable available
With htmx: Variants: default, accent. Contract: navigation links, not a roving-focus tabpanel controller. Visual (active tab boxed): ┌──────────┐ │ Overview │ Details Logs └──────────┴──────────────────
Copy-paste
{% from "chirpui/ascii_tabs.html" import ascii_tabs, ascii_tab %}

    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", active=true) }}
        {{ ascii_tab("details", "Details") }}
        {{ ascii_tab("logs", "Logs") }}
    {% end %}

With htmx:
    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", url="/tabs/overview", hx_target="#panel", active=true) }}
        {{ ascii_tab("details", "Details", url="/tabs/details", hx_target="#panel") }}
    {% end %}

Variants: default, accent.
Contract: navigation links, not a roving-focus tabpanel controller.

Visual (active tab boxed):
    ┌──────────┐
    │ Overview  │  Details    Logs
    └──────────┴──────────────────

ascii-table

ASCII Table

ascii stable available
Content
Copy-paste
{% from "chirpui/ascii_table.html" import ascii_table, ascii_row %}

{% call ascii_table(headers=["Name", "Status", "Latency"]) %}
    {{ ascii_row("api-gateway", "Healthy", "23ms") }}
    {{ ascii_row("auth-service", "Healthy", "41ms") }}
{% end %}

Per-column alignment:
{% call ascii_table(headers=["Service", "Status", "Requests"], %}
                 align=["left", "center", "right"])
    {{ ascii_row("api-gateway", "Healthy", "12,847") }}
{% end %}

Variants: single (default), double, heavy, rounded.
Compact mode: compact=true for tighter spacing.
Striped rows: striped=true.
Caption: use the caption slot.

ascii-tabs

ASCII Tabs

ascii stable available
With htmx: Variants: default, accent. Contract: navigation links, not a roving-focus tabpanel controller. Visual (active tab boxed): ┌──────────┐ │ Overview │ Details Logs └──────────┴──────────────────
Copy-paste
{% from "chirpui/ascii_tabs.html" import ascii_tabs, ascii_tab %}

    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", active=true) }}
        {{ ascii_tab("details", "Details") }}
        {{ ascii_tab("logs", "Logs") }}
    {% end %}

With htmx:
    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", url="/tabs/overview", hx_target="#panel", active=true) }}
        {{ ascii_tab("details", "Details", url="/tabs/details", hx_target="#panel") }}
    {% end %}

Variants: default, accent.
Contract: navigation links, not a roving-focus tabpanel controller.

Visual (active tab boxed):
    ┌──────────┐
    │ Overview  │  Details    Logs
    └──────────┴──────────────────

ascii-ticker

ASCII Ticker

ascii stable available
Variants: default, accent, success, warning, error. Speed: slow, default, fast.
Copy-paste
{% from "chirpui/ascii_ticker.html" import ascii_ticker %}

    {{ ascii_ticker("System healthy — 99.97% uptime — 0 errors — Next deploy in 2h") }}
    {{ ascii_ticker("BREAKING: New version deployed to production", variant="warning") }}

Variants: default, accent, success, warning, error.
Speed: slow, default, fast.

ascii-tile-btn

ASCII Tile Button

ascii stable available
Grid layout:
Variants: default, success, warning, danger, accent. lit=true starts in the "on" glow state. toggle=true makes it a toggle button (checkbox).
Copy-paste
{% from "chirpui/ascii_tile_btn.html" import tile_btn, tile_grid %}

    {{ tile_btn("F1", label="EXEC") }}
    {{ tile_btn("◆", label="PWR", variant="success", lit=true) }}
    {{ tile_btn("■", label="STOP", variant="danger") }}

    Grid layout:
    {% call tile_grid(cols=4) %}
        {{ tile_btn("1", label="CH1") }}
        {{ tile_btn("2", label="CH2") }}
        {{ tile_btn("3", label="CH3") }}
        {{ tile_btn("4", label="CH4") }}
    {% end %}

Variants: default, success, warning, danger, accent.
lit=true starts in the "on" glow state.
toggle=true makes it a toggle button (checkbox).

ascii-tile-grid

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_tile_grid.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_tile_grid.html" import ascii_tile_grid %}

{{ ascii_tile_grid() }}

ascii-toggle

ASCII Toggle

ascii stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_ascii_toggle() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/ascii_toggle.html" import ascii_toggle %}  4 |   |

Copy-paste
{% from "chirpui/ascii_toggle.html" import ascii_toggle %}

{{ ascii_toggle() }}

ascii-vu

ASCII VU Meter

ascii stable available
CPU 65%
MEM 90%
L 72%
R 68%
Variants: default, accent, success, warning. peak=true adds a peak hold marker. width: number of cells (default 20). animate=true adds a gentle bounce animation.
Copy-paste
{% from "chirpui/ascii_vu_meter.html" import ascii_vu_meter, vu_meter_stack %}

    {{ ascii_vu_meter("cpu", value=65, label="CPU") }}
    {{ ascii_vu_meter("mem", value=90, label="MEM", peak=true) }}

    {% call vu_meter_stack() %}
        {{ ascii_vu_meter("L", value=72, label="L") }}
        {{ ascii_vu_meter("R", value=68, label="R") }}
    {% end %}

Variants: default, accent, success, warning.
peak=true adds a peak hold marker.
width: number of cells (default 20).
animate=true adds a gentle bounce animation.

ascii-vu-stack

ascii experimental available

Preview unavailable: Template 'chirpui/ascii_vu_stack.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ascii_vu_stack.html" import ascii_vu_stack %}

{{ ascii_vu_stack() }}

aspect-ratio

Aspect Ratio

layout stable available
Copy-paste
{% from "chirpui/aspect_ratio.html" import aspect_ratio %}

{% call aspect_ratio("16 / 9") %}
    <img src="/hero.jpg" alt="">
{% end %}

attachment-chip

File item / attachment chip

form experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_attachment_chip() missing 2 required positional arguments: 'id' and 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/file_item.html" import attachment_chip %}  4 |   |

Copy-paste
{% from "chirpui/file_item.html" import attachment_chip %}

{{ attachment_chip() }}

aura

Aura — chromatic halo behind stacked content (glass surfaces, cards, etc.)

effect experimental available
Params: tone — accent, warm, cool, muted, primary (token-driven tints) spread — sm (tight), md (default), lg (hero / wide blades) mirror — flip the gradient horizontally (e.g. panel column on the left) See COMPONENT-OPTIONS.md § aura.
Copy-paste
{% from "chirpui/aura.html" import aura %}
    {% from "chirpui/surface.html" import surface %}

    {% call aura(tone="accent", spread="md") %}
      {% call surface(variant="glass") %}…{% end %}
    {% end %}

    {% call aura(tone="warm", spread="lg", mirror=true) %}…{% end %}

Params:
    tone   — accent, warm, cool, muted, primary (token-driven tints)
    spread — sm (tight), md (default), lg (hero / wide blades)
    mirror — flip the gradient horizontally (e.g. panel column on the left)

See COMPONENT-OPTIONS.md § aura.

aura_tone

effect experimental available

Preview unavailable: Template 'chirpui/aura_tone.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/aura_tone.html" import aura_tone %}

{{ aura_tone() }}

aurora

Aurora Background

effect experimental available

Content over aurora

Vivid background
Copy-paste
{% from "chirpui/aurora.html" import aurora %}

{% call aurora() %}
    <h1>Content over aurora</h1>
{% end %}

{% call aurora(variant="intense") %}
    <div>Vivid background</div>
{% end %}

avatar

Avatar component

data-display stable available
Copy-paste
{% from "chirpui/avatar.html" import avatar %}

{{ avatar(src="/img/user.jpg", alt="Alice") }}
{{ avatar(src="/img/user.jpg", alt="Alice", size="lg", status="online") }}
{{ avatar(initials="AB", alt="Alice Brown")  # fallback when no src }}
{{ avatar(src="/img/user.jpg", decorative=true)  # suppresses screen reader }}

avatar-stack

Avatar Stack component

data-display stable available
Content
Copy-paste
{% from "chirpui/avatar_stack.html" import avatar_stack %}
{% from "chirpui/avatar.html" import avatar %}

{% call avatar_stack(max_visible=3) %}
    {{ avatar(src="/a.jpg", alt="Alice", size="sm") }}
    {{ avatar(src="/b.jpg", alt="Bob", size="sm") }}
    {{ avatar(src="/c.jpg", alt="Carol", size="sm") }}
{% end %}

{% call avatar_stack(max_visible=3, total=5) %}
    {{ avatar(...) }}
    {{ avatar(...) }}
    {{ avatar(...) }}
{% end %}
# Shows 3 avatars + "+2" overlay

badge

Badge component

feedback stable available
Active Grass Fire Tag
Copy-paste
{% from "chirpui/badge.html" import badge %}

{{ badge("Active", variant="success") }}
{{ badge("Grass", color="#78c850") }}
{{ badge("Fire", color="fire", fill="solid") }}
{{ badge("Tag", href="/tags/x") }}

band

Band component

marketing experimental available
Content
Copy-paste
{% from "chirpui/band.html" import band %}

{% call band(variant="elevated", width="inset", pattern="grid") %}
    {% slot header %}section_header("Featured"){% end %}
    {{ grid(cols=3) ...cards... end }}
{% end %}

{% call band(width="bleed", variant="accent") %}
    Full-bleed accent section content.
{% end %}

bar-chart

Bar Chart component

data-display stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_bar_chart() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/bar_chart.html" import bar_chart %}  4 |   |

Copy-paste
{% from "chirpui/bar_chart.html" import bar_chart %}

    {{ bar_chart(items=[ }}
        {"label": "create-rule", "value": 42},
        {"label": "debug-agent", "value": 18},
    ], max=50)

    {{ bar_chart(items=tag_counts, max=10, show_value=true, variant="gold") }}
    {{ bar_chart(items=..., label_href=lambda i: f"/skills?tag={i['label']}") }}

items: list of {label, value} or {label, value, href?}
max: scale for bar width (default: max of values)
show_value: show numeric value after bar (default: true)
variant: gold, radiant, success, muted (default: gold)
size: sm, md, lg (default: md)

bento

effect experimental available

Preview unavailable: Template 'chirpui/bento.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/bento.html" import bento %}

{{ bento() }}

bg-pattern

effect experimental available

Preview unavailable: Template 'chirpui/bg_pattern.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/bg_pattern.html" import bg_pattern %}

{{ bg_pattern() }}

blade

effect experimental available

Preview unavailable: Template 'chirpui/blade.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/blade.html" import blade %}

{{ blade() }}

block

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import block %}

{% call block() %}
  Content
{% end %}

border-beam

Border Beam

effect experimental available

Content with glowing border

Success-colored beam

Copy-paste
{% from "chirpui/border_beam.html" import border_beam %}

{% call border_beam() %}
    <p>Content with glowing border</p>
{% end %}

{% call border_beam(variant="success") %}
    <p>Success-colored beam</p>
{% end %}

bounce-in

effect experimental available

Preview unavailable: Template 'chirpui/bounce_in.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/bounce_in.html" import bounce_in %}

{{ bounce_in() }}

breadcrumbs

Breadcrumbs component

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_breadcrumbs() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/breadcrumbs.html" import breadcrumbs %}  4 |   |

Copy-paste
{% from "chirpui/breadcrumbs.html" import breadcrumbs %}

{{ breadcrumbs([ }}
    {"label": "Home", "href": "/"},
    {"label": "Docs", "href": "/docs"},
    {"label": "Getting Started"}
])

btn

Button component. Use chirpui-btn with variants. Supports loading state for htmx.

control stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_btn() missing 1 required positional argument: 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/button.html" import btn %}  4 |   |

Copy-paste
{% from "chirpui/button.html" import btn %}

{% call btn() %}
  Content
{% end %}

btn-group

control stable available

Preview unavailable: Template 'chirpui/btn_group.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/btn_group.html" import btn_group %}

{{ btn_group() }}

bulk-bar

control experimental available

Preview unavailable: Template 'chirpui/bulk_bar.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/bulk_bar.html" import bulk_bar %}

{{ bulk_bar() }}

calendar

Calendar component

data-display stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_calendar() missing 2 required positional arguments: 'weeks' and 'month_label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/calendar.html" import calendar %}  4 |   |

Copy-paste
{% from "chirpui/calendar.html" import calendar %}

    {{ calendar(weeks=[[0,0,1,2,3,4,5],[6,7,8,...],...], }}
             month_label="January 2025",
             prev_url="/calendar/2024/12", next_url="/calendar/2025/2")

weeks: from calendar.monthcalendar(year, month) — 0 = empty cell.

callout

Callout component

feedback stable available
Variants: info, success, warning, error, neutral
Copy-paste
{% from "chirpui/callout.html" import callout %}

    {% call callout(variant="info", title="Note") %}
        This is an informational callout with a title.
    {% end %}

    {% call callout(variant="warning", title="Tip") %}
        {% slot header_actions %}<button>Copy</button>{% end %}
        Body content.
    {% end %}

Variants: info, success, warning, error, neutral

card

Card component

container stable available
Content
Copy-paste
{% from "chirpui/card.html" import card %}

    {% call card(title="My Card") %}
        <p>Card body content.</p>
    {% end %}

    {% call card(title="Settings", icon="⚙") %}
        {% slot header_actions %}<button>⋯</button>{% end %}
        <p>Body content.</p>
    {% end %}

    {% call card(title="Feature", variant="feature") %}
        {% slot media %}<img src="..." alt="...">{% end %}
        <p>Body content.</p>
        {% slot footer %}Tags or metadata here{% end %}
    {% end %}

    {% call card(title="Usage", attrs_map={"id": "usage-widget"}) %}
        <p>Stable id on the outer article for hx-target="#usage-widget".</p>
    {% end %}

Footer: use {% slot footer %} (preferred). The legacy footer= string parameter
still works but emits a ChirpUIDeprecationWarning.

carousel

Carousel component

interactive stable available
Variants: compact (card strip), page (hero, one per viewport)
Copy-paste
{% from "chirpui/carousel.html" import carousel, carousel_slide %}

    {% call carousel(variant="compact", slide_count=4, show_dots=true) %}
        {% call carousel_slide(1) %}
            <div class="chirpui-card">...</div>
        {% end %}
        {% call carousel_slide(2) %}
            ...
        {% end %}
    {% end %}

Variants: compact (card strip), page (hero, one per viewport)

catalog-rail

Media pattern assets

media experimental available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_catalog_rail() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/media_patterns.html" import catalog_rail %}  4 |   |

Copy-paste
{% from "chirpui/media_patterns.html" import catalog_rail %}

{% call catalog_rail("actions") %}
  Content
{% end %}

channel-card

Channel Card component

data-display stable available
DEPRECATED: use_slots parameter. Always use named slots (body, actions). The use_slots=false path will be removed in a future release.
Copy-paste
{% from "chirpui/channel_card.html" import channel_card %}
    {% from "chirpui/button.html" import btn %}

    {% call channel_card(href="/channel/1", name="Dev Channel", subscribers="12.5K") %}
        {% slot body %}<p>Custom info</p>{% end %}
        {% slot actions %}btn("Subscribe", variant="primary"){% end %}
    {% end %}

DEPRECATED: use_slots parameter. Always use named slots (body, actions).
The use_slots=false path will be removed in a future release.

chapter-item

Chapter List component

data-display stable available
Chapters
  1. 0:00 Introduction
  2. 2:34 Setup
  3. 5:12 Demo
Slots: summary_actions (actions next to summary).
Copy-paste
{% from "chirpui/chapter_list.html" import chapter_list, chapter_item %}

    {% call chapter_list(summary="Chapters") %}
        {{ chapter_item(title="Introduction", timestamp="0:00", href="/watch/1#t=0") }}
        {{ chapter_item(title="Setup", timestamp="2:34", href="/watch/1#t=154") }}
        {{ chapter_item(title="Demo", timestamp="5:12", href="/watch/1#t=312") }}
    {% end %}

Slots: summary_actions (actions next to summary).

chapter-list

Chapter List component

data-display stable available
Chapters
  1. 0:00 Introduction
  2. 2:34 Setup
  3. 5:12 Demo
Slots: summary_actions (actions next to summary).
Copy-paste
{% from "chirpui/chapter_list.html" import chapter_list, chapter_item %}

    {% call chapter_list(summary="Chapters") %}
        {{ chapter_item(title="Introduction", timestamp="0:00", href="/watch/1#t=0") }}
        {{ chapter_item(title="Setup", timestamp="2:34", href="/watch/1#t=154") }}
        {{ chapter_item(title="Demo", timestamp="5:12", href="/watch/1#t=312") }}
    {% end %}

Slots: summary_actions (actions next to summary).

chat-input

Chat Input / Composer

form experimental available
Copy-paste
{% from "chirpui/chat_input.html" import composer %}
{% call composer(action="/send", name="message", send_key="enter",
                 stop_action="/abort", hx_target="#thread",
                 hx_swap="beforeend") %}
    {% slot attachments %}{% end %}
    {% slot suggestions %}{% end %}
{% end %}

chat-layout

Chat Layout component

layout stable available
    ...
...
fill=true: adds chirpui-chat-layout--fill. For SSE/HTMX roots inside the messages slot, add class chirpui-chat-layout__messages-body on the wrapper (see LAYOUT-VERTICAL.md).
Copy-paste
{% from "chirpui/chat_layout.html" import chat_layout %}

    {% call chat_layout(show_activity=true, fill=true) %}
    {% slot messages %}
        <ul class="chirpui-message-thread">...</ul>
    {% end %}
    {% slot input %}
        <div class="chirpui-chat-input">...</div>
    {% end %}
    {% slot activity %}
        <aside>Model info, suggestions...</aside>
    {% end %}
    {% end %}

fill=true: adds chirpui-chat-layout--fill. For SSE/HTMX roots inside the messages
slot, add class chirpui-chat-layout__messages-body on the wrapper (see LAYOUT-VERTICAL.md).

children

layout stable available

Preview unavailable: Template 'chirpui/children.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/children.html" import children %}

{{ children() }}

chip

Chip group

data-display stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_chip() missing 1 required positional argument: 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/chip_group.html" import chip %}  4 |   |

Copy-paste
{% from "chirpui/chip_group.html" import chip %}

{{ chip() }}

chip-group

Chip group

data-display stable available
Content
Copy-paste
{% from "chirpui/chip_group.html" import chip_group %}

{% call chip_group() %}
  Content
{% end %}

citation

Citations

layout stable available
Copy-paste
{% from "chirpui/citations.html" import citation_chip, sources_summary, citation_modal %}
{{ citation_chip(index=1, title="Scope spec", href="https://x.test/doc",
                 source_id="src-1") }}
{{ sources_summary(sources=[{"id": "src-1", "title": "Scope spec",
                             "href": "https://x.test/doc", "relevance": "high"}]) }}

clamp-2

layout legacy compatibility

Preview unavailable: Template 'chirpui/clamp_2.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/clamp_2.html" import clamp_2 %}

{{ clamp_2() }}

clamp-3

layout legacy compatibility

Preview unavailable: Template 'chirpui/clamp_3.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/clamp_3.html" import clamp_3 %}

{{ clamp_3() }}

click-jello

effect experimental available

Preview unavailable: Template 'chirpui/click_jello.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/click_jello.html" import click_jello %}

{{ click_jello() }}

click-wobble

effect experimental available

Preview unavailable: Template 'chirpui/click_wobble.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/click_wobble.html" import click_wobble %}

{{ click_wobble() }}

cluster

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import cluster %}

{% call cluster() %}
  Content
{% end %}

code

content stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_code() missing 1 required positional argument: 'text' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/code.html" import code %}  4 |   |

Copy-paste
{% from "chirpui/code.html" import code %}

{{ code() }}

code-block

content stable available

Preview unavailable: Template 'chirpui/code_block.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/code_block.html" import code_block %}

{{ code_block() }}

code-block-wrapper

content stable available

Preview unavailable: Template 'chirpui/code_block_wrapper.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/code_block_wrapper.html" import code_block_wrapper %}

{{ code_block_wrapper() }}

collapse

Collapse component

interactive stable available
Click to expand
Hidden content here.
Copy-paste
{% from "chirpui/collapse.html" import collapse %}

{% call collapse(trigger="Click to expand", open=false) %}
    Hidden content here.
{% end %}

combobox

Typeahead combobox for form fields — text input over a filtered

form experimental available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_combobox() missing 2 required positional arguments: 'name' and 'options' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/combobox.html" import combobox %}  4 |   |

Copy-paste
{% from "chirpui/combobox.html" import combobox %}

{{ combobox(name="country", label="Country",
            placeholder="Search countries…", value="us",
            options=[{"label": "Canada", "value": "ca"},
                     {"label": "United States", "value": "us"}]) }}

{{ combobox(name="tags", label="Tags", multiple=true,
            placeholder="Add tags…", options=[...]) }}

command-bar

control stable available

Preview unavailable: Runtime Error: Cannot compare NoneType with NoneType Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/command_bar.html" import command_bar %}  4 |   | Expression: <see stack trace> Values: left = None (NoneType) right = None (NoneType) Suggestion: Use | default(fallback) to provide a fallback for None values before sorting

Copy-paste
{% from "chirpui/command_bar.html" import command_bar %}

{{ command_bar() }}

command-palette

Command Palette component

interactive stable available
Content
Copy-paste
{% from "chirpui/command_palette.html" import ( %}
    command_palette, command_palette_trigger, command_palette_item
)

{{ command_palette_trigger() }}
{% call command_palette(search_url="/search") %}
  {# optional initial/recent results

comment

Comment component

data-display stable available
Alice
Alice

Great post! Thanks for sharing.

Bob

I agree with this.

Copy-paste
{% from "chirpui/comment.html" import comment, comment_thread %}
{% from "chirpui/avatar.html" import avatar %}

{% call comment(author="Alice", time="1h ago", avatar_src="/a.jpg") %}
    <p>Great post! Thanks for sharing.</p>
{% end %}

{% call comment(author="Bob", time="2h ago") %}
    <p>I agree with this.</p>
    {% slot actions %}<a href="/reply">Reply</a>{% end %}
{% end %}

comment-thread

content stable available

Preview unavailable: Template 'chirpui/comment_thread.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/comment_thread.html" import comment_thread %}

{{ comment_thread() }}

composer-shell

Composer shell

form experimental available
Copy-paste
{% from "chirpui/composer_shell.html" import composer_shell %}

{% call composer_shell("actions") %}
  Content
{% end %}

confetti

Confetti

effect experimental available
Copy-paste
{% from "chirpui/confetti.html" import confetti, confetti_trigger %}

{{ confetti() }}

{{ confetti_trigger("Celebrate!", event="celebrate") }}

{# Or manually:

config-row

Config row — label | control (toggle, select, editable)

container stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_config_row_toggle() missing 2 required positional arguments: 'name' and 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/config_row.html" import config_row_toggle %}  4 |   |

Copy-paste
{% from "chirpui/config_row.html" import config_row_list, config_row_toggle, config_row_select, config_row_editable %}

{% call config_row_list() %}
    {{ config_row_toggle("acp.enabled", "ACP enabled", checked=config.acp.enabled, form_action="/config/set", attrs_map={...}) }}
    {{ config_row_select("logs.level", "Log level", options=[...], selected=config.logs.level, form_action="/config/set", attrs_map={...}) }}
    {{ config_row_editable("endpoint", config.acp.endpoint, edit_url="/config/edit/acp.endpoint", swap_id="acp-endpoint") }}
{% end %}

config-row-list

container stable available

Preview unavailable: Template 'chirpui/config_row_list.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/config_row_list.html" import config_row_list %}

{{ config_row_list() }}

confirm

Confirm dialog component

feedback stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_confirm_dialog() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/confirm.html" import confirm_dialog %}  4 |   |

Copy-paste
{% from "chirpui/confirm.html" import confirm_dialog, confirm_trigger %}

    {{ confirm_trigger("del-dlg", label="Delete") }}

    {% call confirm_dialog("del-dlg", title="Delete item?", message="This cannot be undone.", %}
                       confirm_label="Delete", cancel_label="Cancel", variant="danger",
                       confirm_url="/items/1/delete", confirm_method="POST")
    {% end %}

When confirm_url is provided, confirm submits the form (htmx or native).
Cancel closes the dialog via form method="dialog".

constellation

Constellation

effect experimental available

Starfield hero

Dense warm starfield

Copy-paste
{% from "chirpui/constellation.html" import constellation %}

{% call constellation() %}
    <h1>Starfield hero</h1>
{% end %}

{% call constellation(variant="warm", density="dense") %}
    <p>Dense warm starfield</p>
{% end %}

container

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import container %}

{% call container() %}
  Content
{% end %}

context-menu

Context Menu

navigation stable available
Right-click for actions
Copy-paste
{% from "chirpui/context_menu.html" import context_menu %}

{% call context_menu(items=[
    {"label": "Open", "action": "open", "icon": "↗"},
    {"label": "Rename", "action": "rename"},
    {"label": "Delete", "action": "delete", "variant": "danger"},
], label="Right-click for actions") %}
    <div class="chirpui-surface">Right-click for actions</div>
{% end %}

context-menu__item

Context Menu

navigation stable available
Right-click for actions
Copy-paste
{% from "chirpui/context_menu.html" import context_menu %}

{% call context_menu(items=[
    {"label": "Open", "action": "open", "icon": "↗"},
    {"label": "Rename", "action": "rename"},
    {"label": "Delete", "action": "delete", "variant": "danger"},
], label="Right-click for actions") %}
    <div class="chirpui-surface">Right-click for actions</div>
{% end %}

conversation-item

Conversation Item component

navigation stable available
Copy-paste
{% from "chirpui/conversation_item.html" import conversation_item %}
{% from "chirpui/avatar.html" import avatar %}

{% call conversation_item(href="/chat/1", name="Alice", preview="Hey!", unread=3, time="2m") %}
    {{ avatar(src="/alice.jpg", alt="Alice", size="sm") }}
    {% slot actions %}<button>⋯</button>{% end %}
{% end %}

conversation-list

Conversation List component

navigation stable available
Copy-paste
{% from "chirpui/conversation_list.html" import conversation_list, conversation_item %}

{% call conversation_list() %}
    {% call conversation_item(href="/chat/1", name="Alice", preview="Hey there!", unread=2, time="2m") %}{% end %}
    {% end %}
    {% call conversation_item(href="/chat/2", name="Bob", preview="See you tomorrow", muted=true) %}{% end %}
    {% end %}
{% end %}

copy-btn

Copy button

control stable available
Copy-paste
{% from "chirpui/copy_button.html" import copy_button %}
{{ copy_button("text to copy", label="Copy") }}

counter-badge

feedback stable available

Preview unavailable: Template 'chirpui/counter_badge.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/counter_badge.html" import counter_badge %}

{{ counter_badge() }}

cta-band

CTA Band

marketing stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_cta_band() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/cta_band.html" import cta_band %}  4 |   |

Copy-paste
{% from "chirpui/cta_band.html" import cta_band %}

{{ cta_band( }}
    title="Start building",
    body="Improve each step of the lifecycle.",
    primary_label="Start",
    primary_href="/start",
    secondary_label="Get a demo",
    secondary_href="/demo",
)

data-grid

Data Grid

data-display experimental available
No records found
Copy-paste
{% from "chirpui/data_grid.html" import data_grid %}

{% call data_grid() %}
  Content
{% end %}

data-table

Data Table

data-display experimental available
No records found
Copy-paste
{% from "chirpui/data_table.html" import data_table %}

{{ data_table( }}
    title="Users",
    headers=["Name", "Status"],
    rows=[["Ada", "Active"]],
    filter_action="/users",
    current=1,
    total=4,
    url_pattern="/users?page={page}",
)

date-picker

Date / range picker

form experimental available
Copy-paste
{% from "chirpui/date_picker.html" import date_picker %}

{{ date_picker(name="due", label="Due date", value="2025-01-15") }}
{{ date_picker(name="span", label="Date range", range=true,
               min="2025-01-01", max="2025-12-31") }}

density

layout stable available

Preview unavailable: Template 'chirpui/density.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/density.html" import density %}

{{ density() }}

description_list

Description list component

layout stable available
Content
Copy-paste
{% from "chirpui/description_list.html" import description_list, description_item %}

    {{ description_list(items=[{"term": "Name", "detail": "Alice"}, {"term": "Email", "detail": "alice@example.com"}]) }}

    Or with slot:
    {% call description_list() %}
        {{ description_item("Name", "Alice") }}
        {{ description_item("Email", "alice@example.com") }}
    {% end %}

    {{ description_list(items=..., variant="horizontal") for term left, detail right layout. }}

    Modifiers: hoverable=true (row highlight on hover), divided=true (border between rows),
               relaxed=true (more vertical spacing).
    Icon support: description_item("Name", "Alice", icon="◇")
Slots: header (content above the list).

detail-header

Detail header

layout experimental available

actions

Copy-paste
{% from "chirpui/detail_header.html" import detail_header %}

{% call detail_header("actions") %}
  Content
{% end %}

display

typography legacy compatibility

Preview unavailable: Template 'chirpui/display.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/display.html" import display %}

{{ display() }}

divider

Divider component

layout stable available
Copy-paste
{% from "chirpui/divider.html" import divider, divider_text %}

{{ divider()  — line only }}
{{ divider("OR")  — line with text }}
{{ divider("OR", horizontal=true) }}
{{ divider("OR", variant="primary") }}

dl

data-display stable available

Preview unavailable: Template 'chirpui/dl.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/dl.html" import dl %}

{{ dl() }}

dnd

Drag-drop primitives

interactive stable available
Content
Copy-paste
{% from "chirpui/dnd.html" import dnd_list %}

{% call dnd_list() %}
  Content
{% end %}

dock

Floating Dock

effect experimental available
Copy-paste
{% from "chirpui/dock.html" import dock %}

{{ dock(items=[ }}
    {"icon": "home", "label": "Home", "href": "/"},
    {"icon": "search", "label": "Search", "href": "/search"},
    {"icon": "settings", "label": "Settings", "active": true},
])

{{ dock(items=[...], variant="glass", size="lg") }}

document-header

Document header

layout stable available

README.md

docs/README.md Draft
Copy-paste
{% from "chirpui/document_header.html" import document_header %}

{% call document_header("README.md", path="docs/README.md", status="Draft") %}
{% slot actions %}<button type="button">Save</button>{% end %}
{% end %}

donut

Donut Chart component

data-display stable available
Copy-paste
{% from "chirpui/donut.html" import donut %}

{{ donut(value=75, max=100) }}
{{ donut(value=3, max=5, text="3/5", variant="success") }}
{{ donut(value=42, max=100, caption="Uptime", size="lg") }}
{{ donut(value=40, max=100, caption="Success") }}

drawer

Drawer component

overlay stable available

Filters

Drawer content.

Copy-paste
{% from "chirpui/drawer.html" import drawer, drawer_trigger %}

{{ drawer_trigger("side-drawer", label="Open panel") }}

{% call drawer("side-drawer", title="Filters", side="right") %}
    <p>Drawer content.</p>
{% end %}

dropdown

Dropdown component

navigation stable available
Options
Signed in as alice
Settings Profile
Copy-paste
{% from "chirpui/dropdown.html" import dropdown %}

{% call dropdown(label="Options") %}
    {% slot header %}<div class="chirpui-dropdown__header">Signed in as alice</div>{% end %}
    <a href="/settings">Settings</a>
    <a href="/profile">Profile</a>
    {% slot footer %}<a href="/logout">Log out</a>{% end %}
{% end %}

dropdown-select

Dropdown menu, select, and split-button primitives — dropdown_select

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_dropdown_select() missing 2 required positional arguments: 'trigger_label' and 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/dropdown_menu.html" import dropdown_select %}  4 |   |

Copy-paste
{% from "chirpui/dropdown_menu.html" import dropdown_menu, dropdown_select, dropdown_split %}
{% from "chirpui/button.html" import btn %}

{{ dropdown_menu(btn("Actions", icon="▾"), items=[...]) }}

dropdown__item

Dropdown menu, select, and split-button primitives — dropdown_select

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_dropdown_menu() missing 2 required positional arguments: 'trigger' and 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/dropdown_menu.html" import dropdown_menu %}  4 |   |

Copy-paste
{% from "chirpui/dropdown_menu.html" import dropdown_menu, dropdown_select, dropdown_split %}
{% from "chirpui/button.html" import btn %}

{{ dropdown_menu(btn("Actions", icon="▾"), items=[...]) }}

empty-panel-state

Empty panel state

feedback stable available
docs

No file selected

Select a file from the tree to start editing.

Copy-paste
{% from "chirpui/empty_panel_state.html" import empty_panel_state %}

{% call empty_panel_state(title="No file selected", icon="docs") %}
<p>Select a file from the tree to start editing.</p>
{% slot actions %}<a href="/author">Browse</a>{% end %}
{% end %}

empty-state

Empty State component

feedback stable available

No Projects

Create your first project to get started.

btn("New Project", variant="primary")

No items

Get started by creating your first item.

Create

No results

query

No matches found.

Try a different search term

Docs wave extras: code, suggestions, search_hint (all data-in).
Copy-paste
{% from "chirpui/empty.html" import empty_state %}

    {% call empty_state(icon="✧", title="No Projects") %}
        <p>Create your first project to get started.</p>
        {% slot actions %}btn("New Project", variant="primary"){% end %}
    {% end %}

    {% call empty_state(title="No items", action_label="Create", action_href="/new") %}
        <p>Get started by creating your first item.</p>
    {% end %}

    {% call empty_state(title="No results", code="query", search_hint="Try a different search term") %}
        <p>No matches found.</p>
    {% end %}

Docs wave extras: code, suggestions, search_hint (all data-in).

entity-header

Entity header (dashboard-grade)

layout stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_entity_header() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/entity_header.html" import entity_header %}  4 |   |

Copy-paste
{% from "chirpui/entity_header.html" import entity_header %}

{% call entity_header(title="Chain: My Workflow", meta="3 steps · Updated 2h ago") %}
    {% slot actions %}
    {{ btn("Edit", href="/chains/1/edit") }}
    {{ confirm_trigger("del-chain", label="Delete") }}
    {% end %}
{% end %}

fab

Floating Action Button

control stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_fab() missing 2 required positional arguments: 'icon' and 'aria_label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/fab.html" import fab %}  4 |   |

Copy-paste
{% from "chirpui/fab.html" import fab %}

    {{ fab("search", aria_label="Search", href="/search") }}
    {{ fab("plus", aria_label="Create", variant="primary", corner="bottom-end", }}
        visibility="mobile-only", hx={"post": "/new", "target": "#main"})

`target` wires the FAB to open a native ``<dialog>`` via ``chirpuiDialogTarget()``
(focus returns to the FAB on close). Pair with ``command_palette_fab()`` for
mobile command-palette access.

hx={...} — preferred for htmx attributes on button FABs.

facet-chip

Facet chip

control experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_facet_chip() missing 1 required positional argument: 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/facet_chip.html" import facet_chip %}  4 |   |

Copy-paste
{% from "chirpui/facet_chip.html" import facet_chip %}

{{ facet_chip() }}

feature-section

Feature Section component

marketing experimental available

Content
Copy-paste
{% from "chirpui/feature_section.html" import feature_section, feature_stack %}

{% call feature_section(layout="split", variant="halo", reverse=true) %}
    {% slot eyebrow %}New{% end %}
    {% slot title %}Lightning fast builds{% end %}
    <p>Description text with details.</p>
    <ul><li>Bullet one</li><li>Bullet two</li></ul>
    {% slot actions %}btn("Get started", variant="primary"){% end %}
    {% slot media %}surface(...)...install_snippet(...){% end %}
{% end %}

{% call feature_stack() %}
    {{ feature_section(...)...end }}
    {{ feature_section(..., reverse=true)...end }}
{% end %}

feature-stack

Feature Section component

marketing experimental available
Content
Copy-paste
{% from "chirpui/feature_section.html" import feature_section, feature_stack %}

{% call feature_section(layout="split", variant="halo", reverse=true) %}
    {% slot eyebrow %}New{% end %}
    {% slot title %}Lightning fast builds{% end %}
    <p>Description text with details.</p>
    <ul><li>Bullet one</li><li>Bullet two</li></ul>
    {% slot actions %}btn("Get started", variant="primary"){% end %}
    {% slot media %}surface(...)...install_snippet(...){% end %}
{% end %}

{% call feature_stack() %}
    {{ feature_section(...)...end }}
    {{ feature_section(..., reverse=true)...end }}
{% end %}

field

Form field macros

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_field_wrapper() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forms.html" import field_wrapper %}  4 |   |

Copy-paste
{% from "chirpui/forms.html" import field_wrapper %}

{% call field_wrapper() %}
  Content
{% end %}

fieldset

Form field macros

form stable available
Content
Copy-paste
{% from "chirpui/forms.html" import fieldset %}

{% call fieldset() %}
  Content
{% end %}

file-tree

File tree

data-display stable available

Preview unavailable: Undefined attribute/key 'str.get' in chirpui/nav_tree.html:66  |  64 |  <ul class="chirpui-nav-tree__list">  65 |  {% for item in items %} > 66 |  <li class="chirpui-nav-tree__item{% if item.get("active") %} chirpui-nav-tree__item--active{% end %}{% if item.get("children") %} chirpui-nav-tree__item--branch{% end %}{% if item.get("open") %} chirpui-nav-tree__item--open{% end %}{% if item.get("muted") %} chirpui-nav-tree__item--muted{% end %}">  67 |  {% if item.get("children") %}  68 |  {% if branch_mode == "linked" %}  | Hint: Use {{ str.get | default('') }} for optional variables Hint: For optional access: `x?.y` (None on missing Mapping keys), `x?.y ?? ""` (covers object-attr misses too), or `x | get("y", '')`.

Copy-paste
{% from "chirpui/file_tree.html" import file_tree %}

{% call file_tree(items=items, title="Files", show_icons=true) %}
{% slot actions %}<button type="button">Refresh</button>{% end %}
{% slot header %}<input type="search" placeholder="Filter files">{% end %}
{% slot footer %}<span>12 files</span>{% end %}
{% end %}

Linked branch parents:
{{ file_tree(items=items, branch_mode="linked") }}

filter-bar

form stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_filter_bar() missing 1 required positional argument: 'action' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/filter_bar.html" import filter_bar %}  4 |   |

Copy-paste
{% from "chirpui/filter_bar.html" import filter_bar %}

{{ filter_bar() }}

filter-group

Filter chips — radiogroup + pill chips (named colors / HTMX)

control stable available
Copy-paste
{% from "chirpui/filter_chips.html" import filter_group, filter_chip %}

{% call filter_group(name="Type") %}
    {{ filter_chip("All", href="/", active=true) }}
    {{ filter_chip("Grass", color="#78c850", href="/g") }}
{% end %}

filter-rail

Dense workspace primitives

navigation experimental available
Copy-paste
{% from "chirpui/workspace_primitives.html" import filter_rail %}

{% call filter_rail() %}
  Content
{% end %}

filter-row

Filter Bar composite

control stable available
Content
Copy-paste
{% from "chirpui/filter_bar.html" import filter_row %}

{% call filter_row() %}
  Content
{% end %}

flow

layout stable preferred

Preview unavailable: Template 'chirpui/flow.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/flow.html" import flow %}

{{ flow() }}

focus-ring

layout legacy compatibility

Preview unavailable: Template 'chirpui/focus_ring.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/focus_ring.html" import focus_ring %}

{{ focus_ring() }}

follow-ups

Follow-up / suggestion chips

form experimental available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_suggestion_chips() missing 1 required positional argument: 'suggestions' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/follow_ups.html" import suggestion_chips %}  4 |   |

Copy-paste
{% from "chirpui/follow_ups.html" import suggestion_chips %}

{{ suggestion_chips() }}

font-2xl

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_2xl.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_2xl.html" import font_2xl %}

{{ font_2xl() }}

font-base

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_base.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_base.html" import font_base %}

{{ font_base() }}

font-lg

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_lg.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_lg.html" import font_lg %}

{{ font_lg() }}

font-medium

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_medium.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_medium.html" import font_medium %}

{{ font_medium() }}

font-mono

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_mono.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_mono.html" import font_mono %}

{{ font_mono() }}

font-sm

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_sm.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_sm.html" import font_sm %}

{{ font_sm() }}

font-xl

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_xl.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_xl.html" import font_xl %}

{{ font_xl() }}

font-xs

typography legacy compatibility

Preview unavailable: Template 'chirpui/font_xs.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/font_xs.html" import font_xs %}

{{ font_xs() }}

form

Form field macros

form stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_form() missing 1 required positional argument: 'action' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forms.html" import form %}  4 |   |

Copy-paste
{% from "chirpui/forms.html" import form %}

{% call form() %}
  Content
{% end %}

form-actions

Form field macros

form stable available
Content
Copy-paste
{% from "chirpui/forms.html" import form_actions %}

{% call form_actions() %}
  Content
{% end %}

form-error-summary

Form field macros

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_form_error_summary() missing 1 required positional argument: 'errors' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forms.html" import form_error_summary %}  4 |   |

Copy-paste
{% from "chirpui/forms.html" import form_error_summary %}

{{ form_error_summary() }}

frame

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import frame %}

{% call frame() %}
  Content
{% end %}

glitch

Glitch Text Effect

effect experimental available
SYSTEM ERROR

HACK THE PLANET

Copy-paste
{% from "chirpui/glitch_text.html" import glitch_text %}

{{ glitch_text("SYSTEM ERROR") }}
{{ glitch_text("HACK THE PLANET", variant="intense", tag="h1") }}

glow-card

Glow Card

effect experimental available

Feature

Description of feature

Accent-colored glow

Copy-paste
{% from "chirpui/glow_card.html" import glow_card %}

{% call glow_card() %}
    <h3>Feature</h3>
    <p>Description of feature</p>
{% end %}

{% call glow_card(variant="accent") %}
    <p>Accent-colored glow</p>
{% end %}

gradient-text

Gradient Text

effect experimental available
Premium Feature

Shifting Colors

Copy-paste
{% from "chirpui/gradient_text.html" import gradient_text %}

{{ gradient_text("Premium Feature") }}
{{ gradient_text("Shifting Colors", animated=true, tag="h2") }}

grain

Grain Overlay

effect experimental available
Vintage photo
Film-like background
Copy-paste
{% from "chirpui/grain.html" import grain %}

{% call grain() %}
    <img src="photo.jpg" alt="Vintage photo">
{% end %}

{% call grain(variant="heavy", animated=true) %}
    <div>Film-like background</div>
{% end %}

grid

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import grid %}

{% call grid() %}
  Content
{% end %}

hero

Hero component

layout stable available

Welcome

Build something great.

Some intro text.

Backgrounds: solid, muted, gradient, mesh, animated-gradient
Copy-paste
{% from "chirpui/hero.html" import hero %}

    {% call hero(title="Welcome", subtitle="Build something great.", background="solid") %}
        <p>Some intro text.</p>
        {% slot actions %}<a href="/start" class="chirpui-btn chirpui-btn--primary">Get started</a>{% end %}
    {% end %}

Backgrounds: solid, muted, gradient, mesh, animated-gradient

hero-effects

Hero Effects

effect experimental available

Welcome

Tagline with floating particles behind

Launch Day

Copy-paste
{% from "chirpui/hero_effects.html" import hero_effects %}

{% call hero_effects(effect="particles") %}
    <h1>Welcome</h1>
    <p>Tagline with floating particles behind</p>
{% end %}

{% call hero_effects(effect="meteors", variant="accent") %}
    <h1>Launch Day</h1>
{% end %}

holy-light

Holy Light

effect experimental available

Radiant hero content

Silver divine light

Copy-paste
{% from "chirpui/holy_light.html" import holy_light %}

{% call holy_light() %}
    <h1>Radiant hero content</h1>
{% end %}

{% call holy_light(variant="silver", intensity="intense") %}
    <p>Silver divine light</p>
{% end %}

hover-card

Hover Card

overlay stable available
Copy-paste
{% from "chirpui/hover_card.html" import hover_card %}

{% call hover_card(open_delay=200) %}
    {% slot trigger %}<button>Hover me</button>{% end %}
    <p>Preview content with richer detail.</p>
{% end %}

hover-jello

effect experimental available

Preview unavailable: Template 'chirpui/hover_jello.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/hover_jello.html" import hover_jello %}

{{ hover_jello() }}

hover-rubber

effect experimental available

Preview unavailable: Template 'chirpui/hover_rubber.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/hover_rubber.html" import hover_rubber %}

{{ hover_rubber() }}

hover-wobble

effect experimental available

Preview unavailable: Template 'chirpui/hover_wobble.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/hover_wobble.html" import hover_wobble %}

{{ hover_wobble() }}

icon-btn

Icon Button

control stable available
hx={"post": "/url", "target": "#id"} — preferred for htmx attributes. Individual hx_get/hx_post/hx_target/hx_swap kwargs override dict keys.
Copy-paste
{% from "chirpui/icon_btn.html" import icon_btn %}

    {{ icon_btn("✕", aria_label="Close") }}
    {{ icon_btn("⚙", variant="ghost", size="lg", href="/settings", aria_label="Settings") }}
    {{ icon_btn("🗑", aria_label="Delete", hx={"delete": "/item/1", "target": "#list", "swap": "outerHTML"}) }}

hx={"post": "/url", "target": "#id"} — preferred for htmx attributes.
Individual hx_get/hx_post/hx_target/hx_swap kwargs override dict keys.

index-card

Index card component

navigation stable available
Copy-paste
{% from "chirpui/index_card.html" import index_card %}

{{ index_card(href="/api/foo", title="foo", description="Does something.", badge="function") }}
{{ index_card(href="/docs/start", title="Getting Started", description="Quick start guide.") }}

infinite-scroll

Infinite Scroll component

interactive stable available
... existing items ...
Copy-paste
{% from "chirpui/infinite_scroll.html" import infinite_scroll %}

{% call infinite_scroll(load_url="/feed?page=2", target="this", swap="beforeend") %}
    ... existing items ...
{% end %}

inline

layout stable available

Preview unavailable: Template 'chirpui/inline.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/inline.html" import inline %}

{{ inline() }}

inline-counter

Inline counter

data-display stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_inline_counter() missing 3 required positional arguments: 'mark', 'value', and 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/inline_counter.html" import inline_counter %}  4 |   |

Copy-paste
{% from "chirpui/inline_counter.html" import inline_counter %}

{{ inline_counter() }}

inline-edit

Inline edit field

form stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_inline_edit_field_display() missing 2 required positional arguments: 'value' and 'edit_url' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/inline_edit_field.html" import inline_edit_field_display %}  4 |   |

Copy-paste
{% from "chirpui/inline_edit_field.html" import inline_edit_field_display, inline_edit_field_form %}

{# Display block — swap target for edit form

input-group

Form field macros

form stable available
Copy-paste
{% from "chirpui/forms.html" import input_group %}

{% call input_group("prefix") %}
  Content
{% end %}

input-otp

Input OTP

form stable available
Copy-paste
{% from "chirpui/input_otp.html" import input_otp %}

{{ input_otp("otp", length=6, label="Verification code") }}

inspector-panel

Dense workspace primitives

layout experimental available
Content
Copy-paste
{% from "chirpui/workspace_primitives.html" import inspector_panel %}

{% call inspector_panel() %}
  Content
{% end %}

install-snippet

Code macros

content stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_install_snippet() missing 1 required positional argument: 'command' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/code.html" import install_snippet %}  4 |   |

Copy-paste
{% from "chirpui/code.html" import install_snippet %}

{% call install_snippet() %}
  Content
{% end %}

island-root

Framework-agnostic island mount wrappers

interactive stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_island_root() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/islands.html" import island_root %}  4 |   |

Copy-paste
{% from "chirpui/islands.html" import island_root %}

{% call island_root() %}
  Content
{% end %}

item

Item

content stable available
Copy-paste
{% from "chirpui/item.html" import item %}

{{ item(title="Settings", description="Manage workspace preferences", href="/settings/") }}

jello

effect experimental available

Preview unavailable: Template 'chirpui/jello.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/jello.html" import jello %}

{{ jello() }}

kbd

Keyboard key

control stable available
⌘K Ctrl K
Copy-paste
{% from "chirpui/kbd.html" import kbd %}

{{ kbd("⌘K") }}
{{ kbd(["Ctrl", "K"], size="sm") }}

key-value-form

form stable available

Preview unavailable: Template 'chirpui/key_value_form.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/key_value_form.html" import key_value_form %}

{{ key_value_form() }}

label

Label

form stable available
Copy-paste
{% from "chirpui/label.html" import ui_label %}

{{ ui_label("Email", for_id="email", required=true) }}

label-overline

Small caps / overline label for cards and dense panels.

content stable available

Section title

Sub-label
Copy-paste
{% from "chirpui/label_overline.html" import label_overline %}
{{ label_overline("Section title", section=true, tag="h3") }}
{{ label_overline("Sub-label") }}

latest-line

Latest line

data-display stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_latest_line() missing 3 required positional arguments: 'label', 'href', and 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/latest_line.html" import latest_line %}  4 |   |

Copy-paste
{% from "chirpui/latest_line.html" import latest_line %}

{{ latest_line() }}

layer

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import layer %}

{% call layer() %}
  Content
{% end %}

lifecycle-showcase

Marketing pattern assets

marketing experimental available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_lifecycle_showcase() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/marketing_patterns.html" import lifecycle_showcase %}  4 |   |

Copy-paste
{% from "chirpui/marketing_patterns.html" import lifecycle_showcase %}

{{ lifecycle_showcase() }}

link

Link component

navigation stable available
Copy-paste
{% from "chirpui/link.html" import link %}

{{ link("Home", href="/") }}
{{ link("Docs", href="/docs", external=true) }}

list

List component

data-display stable available
    Content
Copy-paste
{% from "chirpui/list.html" import list, list_item %}

{% call list_group() %}
    {% call list_item() %}Row one{% end %}
    {% call list_item() %}Row two{% end %}
{% end %}

{{ list_group(["Item 1", "Item 2", "Item 3"]) }}
{{ list_group([{"label": "A", "href": "/a"}, {"label": "B"}], linked=true) }}

list-reset

layout legacy compatibility

Preview unavailable: Template 'chirpui/list_reset.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/list_reset.html" import list_reset %}

{{ list_reset() }}

live-badge

Live Badge component

feedback stable available
LIVE LIVE 2.4K
Copy-paste
{% from "chirpui/live_badge.html" import live_badge %}

{{ live_badge() }}
{{ live_badge(viewers="2.4K") }}

live-event-card

Media pattern assets

media experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_live_event_card() missing 3 required positional arguments: 'name', 'state', and 'time' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/media_patterns.html" import live_event_card %}  4 |   |

Copy-paste
{% from "chirpui/media_patterns.html" import live_event_card %}

{{ live_event_card() }}

load-sentinel

Streaming and AI components

feedback stable available
Loading more
Copy-paste
{% from "chirpui/streaming.html" import streaming_block, copy_btn, prose %}

{% call streaming_block(streaming=true) %}
    Content or thinking...
{% end %}

{% call copy_btn(text="Copy", copy_text=answer_text) %}

{{ prose(content | markdown | safe(reason="markdown output")) }}

logo

Logo component

content stable available
Variants: text, image, both Sizes: sm, md, lg Align: start, center, end
Copy-paste
{% from "chirpui/logo.html" import logo %}

    {{ logo(text="ChirpUI", variant="text") }}
    {{ logo(image_src="/static/logo.svg", image_alt="ChirpUI", variant="image") }}
    {{ logo(text="ChirpUI", image_src="/static/logo.svg", href="/", variant="both") }}

Variants: text, image, both
Sizes: sm, md, lg
Align: start, center, end

logo-cloud

Logo Cloud

marketing stable available
Content
Copy-paste
{% from "chirpui/logo_cloud.html" import logo_cloud %}

{{ logo_cloud(items=[ }}
    {"name": "Acme", "src": "/static/acme.svg", "href": "/customers/acme"},
    {"name": "Globex"},
])

marquee

Marquee

effect experimental available
Acme Corp Globex Initech Umbrella
Fast Reliable Secure
Copy-paste
{% from "chirpui/marquee.html" import marquee %}

{{ marquee(items=["Acme Corp", "Globex", "Initech", "Umbrella"]) }}
{{ marquee(items=["Fast", "Reliable", "Secure"], speed="fast", reverse=true) }}

mb-md

layout legacy compatibility

Preview unavailable: Template 'chirpui/mb_md.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/mb_md.html" import mb_md %}

{{ mb_md() }}

measure-lg

typography legacy compatibility

Preview unavailable: Template 'chirpui/measure_lg.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/measure_lg.html" import measure_lg %}

{{ measure_lg() }}

measure-md

typography legacy compatibility

Preview unavailable: Template 'chirpui/measure_md.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/measure_md.html" import measure_md %}

{{ measure_md() }}

measure-sm

typography legacy compatibility

Preview unavailable: Template 'chirpui/measure_sm.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/measure_sm.html" import measure_sm %}

{{ measure_sm() }}

media-hero-shelf

Media pattern assets

media experimental available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_media_hero_shelf() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/media_patterns.html" import media_hero_shelf %}  4 |   |

Copy-paste
{% from "chirpui/media_patterns.html" import media_hero_shelf %}

{{ media_hero_shelf() }}

media-object

Media Object layout primitive

layout stable available
Content
Copy-paste
{% from "chirpui/media_object.html" import media_object, media_object_media, ... %}

    {% call media_object(align="start") %}
        {% slot media %}<img src="..." alt="...">{% end %}
        {% slot body %}<h3>Title</h3><p>Description.</p>{% end %}
        {% slot actions %}<button>Action</button>{% end %}
    {% end %}

Legacy: media_object_media, media_object_body, media_object_actions

mention

Mention component

content stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_mention() missing 1 required positional argument: 'username' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/mention.html" import mention %}  4 |   |

Copy-paste
{% from "chirpui/mention.html" import mention %}

{{ mention("alice", href="/user/alice") }}
{{ mention("bob")  # span if no href }}

menubar

Menubar

navigation stable available
Copy-paste
{% from "chirpui/menubar.html" import menubar %}

{{ menubar(label="Application", items=[
    {"label": "File", "items": [
        {"label": "New", "action": "new"},
        {"label": "Open", "action": "open"},
    ]},
    {"label": "Edit", "items": [
        {"label": "Undo", "action": "undo"},
    ]},
]) }}

menubar__item

Menubar

navigation stable available
Copy-paste
{% from "chirpui/menubar.html" import menubar %}

{{ menubar(label="Application", items=[
    {"label": "File", "items": [
        {"label": "New", "action": "new"},
        {"label": "Open", "action": "open"},
    ]},
    {"label": "Edit", "items": [
        {"label": "Undo", "action": "undo"},
    ]},
]) }}

message-actions

Message actions

layout stable available
Copy-paste
{% from "chirpui/message_actions.html" import message_actions %}
{% call message_actions(is_last=true, copy_text=raw_markdown,
                        can_delete=true, delete_url="/m/42", delete_target="#m-42") %}
    {{ action_bar_item(icon="up", label="Good answer") }}
    {{ action_bar_item(icon="refresh", label="Regenerate") }}
{% end %}

message-meta

Message meta

layout stable available
claude-opus-4-8 in 1820, out 412, total 2232 in 1820 · out 412 · total 2232
Copy-paste
{% from "chirpui/message_meta.html" import message_meta %}
{{ message_meta("claude-opus-4-8", "2:34 PM",
                usage={"input": 1820, "output": 412, "total": 2232}) }}

message-reactions

content stable available

Preview unavailable: Template 'chirpui/message_reactions.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/message_reactions.html" import message_reactions %}

{{ message_reactions() }}

message-thread

Message Thread component

data-display stable available
    Content
Copy-paste
{% from "chirpui/message_thread.html" import message_thread, message_bubble %}

{% call message_thread() %}
    {% call message_bubble(align="left") %}
        ...
    {% end %}
    {% call message_bubble(align="right") %}
        ...
    {% end %}
{% end %}

message_bubble

Message Bubble component

layout stable available
Content
Copy-paste
{% from "chirpui/message_bubble.html" import message_bubble %}

{% call message_bubble(align="left", status="read") %}
    {% call avatar_slot() %}
        {{ avatar(src="...", alt="Alice", size="sm") }}
    {% end %}
    <p>Hello! How are you?</p>
    <time>2:34 PM</time>
    {% slot actions %}{{ message_actions(is_last=true, copy_text="Hello!") }}{% end %}
{% end %}

meteor

Meteor Effect

effect experimental available

Hero content with meteors

More streaks, accent color

Copy-paste
{% from "chirpui/meteor.html" import meteor %}

{% call meteor() %}
    <h1>Hero content with meteors</h1>
{% end %}

{% call meteor(count=6, variant="accent") %}
    <p>More streaks, accent color</p>
{% end %}

metric-card

Metric grid/card

data-display stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_metric_card() missing 2 required positional arguments: 'value' and 'label' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/metric_grid.html" import metric_card %}  4 |   |

Copy-paste
{% from "chirpui/metric_grid.html" import metric_card %}

{{ metric_card() }}

metric-grid

Metric grid/card

layout stable available
Content
Copy-paste
{% from "chirpui/metric_grid.html" import metric_grid %}

{% call metric_grid() %}
  Content
{% end %}

metric-strip

Dense workspace primitives

data-display experimental available
Content
Copy-paste
{% from "chirpui/workspace_primitives.html" import metric_strip %}

{% call metric_strip() %}
  Content
{% end %}

min-w-0

layout legacy compatibility

Preview unavailable: Template 'chirpui/min_w_0.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/min_w_0.html" import min_w_0 %}

{{ min_w_0() }}

modal

Modal component

container stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_modal() missing 1 required positional argument: 'id' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/modal.html" import modal %}  4 |   |

Copy-paste
{% from "chirpui/modal.html" import modal, modal_trigger %}

{{ modal_trigger("my-modal", label="Open Settings") }}

{% call modal("my-modal", title="Settings") %}
    <p>Modal body content.</p>
    {% fill footer %}
        <button class="chirpui-btn chirpui-btn--ghost" onclick="this.closest('dialog').close()">Cancel</button>
        <button class="chirpui-btn chirpui-btn--primary">Save</button>
    {% end %}
{% end %}

model-card

data-display experimental available

Preview unavailable: Template 'chirpui/model_card.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/model_card.html" import model_card %}

{{ model_card() }}

moderation-queue-item

Forum and social pattern assets

social experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_moderation_queue_item() missing 2 required positional arguments: 'title' and 'reason' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forum_patterns.html" import moderation_queue_item %}  4 |   |

Copy-paste
{% from "chirpui/forum_patterns.html" import moderation_queue_item %}

{% call moderation_queue_item("actions") %}
  Content
{% end %}

mt-md

layout legacy compatibility

Preview unavailable: Template 'chirpui/mt_md.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/mt_md.html" import mt_md %}

{{ mt_md() }}

mt-sm

layout legacy compatibility

Preview unavailable: Template 'chirpui/mt_sm.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/mt_sm.html" import mt_sm %}

{{ mt_sm() }}

nav-link

SPA-style link for content areas

navigation stable available
Copy-paste
{% from "chirpui/nav_link.html" import nav_link %}

{{ nav_link("/page-2", "Next page") }}

{% call nav_link("/details") %}View details{% end %}

nav-pill

navigation stable available

Preview unavailable: Template 'chirpui/nav_pill.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/nav_pill.html" import nav_pill %}

{{ nav_pill() }}

nav-progress

Navigation progress bar

navigation stable available
Copy-paste
{% from "chirpui/nav_progress.html" import nav_progress %}

{{ nav_progress() }}

nav-tree

Nav tree component

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_nav_tree() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/nav_tree.html" import nav_tree %}  4 |   |

Copy-paste
{% from "chirpui/nav_tree.html" import nav_tree %}

{% call nav_tree(items=items, show_icons=false) %}
    slot header: version selector, search
{% end %}

navbar

Navbar component

navigation stable available
Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.
Copy-paste
{% from "chirpui/navbar.html" import navbar, navbar_link, navbar_end, navbar_dropdown %}

    {% call navbar(brand="My App", brand_url="/", use_slots=true) %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
        {{ navbar_link("/about", "About", match="exact") }}
        {% slot end %}btn("Login", href="/login"){% end %}
    {% end %}

    {% call navbar(brand_url="/", use_slots=true, brand_slot=true) %}
        {% slot brand %}logo(text="My App", image_src="/static/logo.svg", variant="both"){% end %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
    {% end %}

Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.

navbar-dropdown

Navbar component

navigation stable available
Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.
Copy-paste
{% from "chirpui/navbar.html" import navbar, navbar_link, navbar_end, navbar_dropdown %}

    {% call navbar(brand="My App", brand_url="/", use_slots=true) %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
        {{ navbar_link("/about", "About", match="exact") }}
        {% slot end %}btn("Login", href="/login"){% end %}
    {% end %}

    {% call navbar(brand_url="/", use_slots=true, brand_slot=true) %}
        {% slot brand %}logo(text="My App", image_src="/static/logo.svg", variant="both"){% end %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
    {% end %}

Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.

navigation-menu

Navigation Menu

navigation experimental available
Copy-paste
{% from "chirpui/navigation_menu.html" import navigation_menu %}

{{ navigation_menu(label="Primary", items=[
    {"label": "Products", "children": [
        {"label": "Analytics", "href": "/products/analytics"},
        {"label": "Automation", "href": "/products/automation"},
    ]},
    {"label": "Pricing", "href": "/pricing"},
]) }}

neon

Neon Text

effect experimental available
OPEN LIVE

ARCADE

Copy-paste
{% from "chirpui/neon_text.html" import neon_text %}

{{ neon_text("OPEN") }}
{{ neon_text("LIVE", color="magenta", animation="pulse") }}
{{ neon_text("ARCADE", color="green", animation="flicker", tag="h1") }}

notification-dot

Notification Dot

feedback stable available
Messages 3
Copy-paste
{% from "chirpui/notification_dot.html" import notification_dot %}

{% call notification_dot() %}
    <button>Inbox</button>
{% end %}

{% call notification_dot(variant="success", count=3) %}
    <span>Messages</span>
{% end %}

number-scale

form experimental available

Preview unavailable: Template 'chirpui/number_scale.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/number_scale.html" import number_scale %}

{{ number_scale() }}

number-ticker

Number Ticker

effect experimental available
$+
Copy-paste
{% from "chirpui/number_ticker.html" import number_ticker %}

{{ number_ticker(1250) }}
{{ number_ticker(99, prefix="$", suffix="+", variant="mono", size="xl") }}

orbit

Orbit

effect experimental available
🌍
⚙️
Copy-paste
{% from "chirpui/orbit.html" import orbit %}

{% call orbit(items=["🐍", "⚡", "🔥", "💎"]) %}
    <span style="font-size: 2rem">🌍</span>
{% end %}

{% call orbit(items=["A", "B", "C"], size="sm", speed="fast") %}
    <strong>⚙️</strong>
{% end %}

overlay

Overlay component

container stable available
...

Text on image

Variants: dark, gradient-bottom, gradient-top
Copy-paste
{% from "chirpui/overlay.html" import overlay %}

    <div style="position:relative;">
        <img src="hero.jpg" alt="...">
        {{ overlay("dark") }}
        <div style="position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;">
            <h2>Text on image</h2>
        </div>
    </div>

Variants: dark, gradient-bottom, gradient-top

page-fill

layout experimental available

Preview unavailable: Template 'chirpui/page_fill.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/page_fill.html" import page_fill %}

{{ page_fill() }}

page_header

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable available

actions

Copy-paste
{% from "chirpui/layout.html" import page_header %}

{% call page_header("actions") %}
  Content
{% end %}

page_hero

Hero component

layout stable available

Welcome

Build something great.

Some intro text.

Backgrounds: solid, muted, gradient, mesh, animated-gradient
Copy-paste
{% from "chirpui/hero.html" import hero %}

    {% call hero(title="Welcome", subtitle="Build something great.", background="solid") %}
        <p>Some intro text.</p>
        {% slot actions %}<a href="/start" class="chirpui-btn chirpui-btn--primary">Get started</a>{% end %}
    {% end %}

Backgrounds: solid, muted, gradient, mesh, animated-gradient

pagination

Pagination component

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_pagination() missing 3 required positional arguments: 'current', 'total', and 'url_pattern' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/pagination.html" import pagination %}  4 |   |

Copy-paste
{% from "chirpui/pagination.html" import pagination %}

{{ pagination(current=3, total=10, url_pattern="/items?page=...", }}
           hx_target="#item-list", hx_select="#main")

panel

Panel component

container stable available
Content
Copy-paste
{% from "chirpui/panel.html" import panel %}

{% call panel(title="Tool Activity", scroll_body=true) %}
{% slot actions %}{{ btn("Clear", variant="ghost", size="sm") }}{% end %}
<div>Activity rows...</div>
{% slot footer %}<span class="chirpui-text-muted chirpui-ui-sm">Connected</span>{% end %}
{% end %}

param

Parameter override controls

form stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_param_field() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/param_override.html" import param_field %}  4 |   |

Copy-paste
{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

params-table

Params table component

data-display stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_params_table() missing 1 required positional argument: 'rows' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/params_table.html" import params_table %}  4 |   |

Copy-paste
{% from "chirpui/params_table.html" import params_table %}

{{ params_table(rows=params, title="Parameters") }}
{{ params_table(rows=params, title="Returns", columns=["name", "type", "description"]) }}

particle-bg

Particle Background

effect experimental available

Hero with particles

More particles, accent color

Copy-paste
{% from "chirpui/particle_bg.html" import particle_bg %}

{% call particle_bg() %}
    <h1>Hero with particles</h1>
{% end %}

{% call particle_bg(count=12, variant="accent") %}
    <p>More particles, accent color</p>
{% end %}

placeholder-inline

layout legacy compatibility

Preview unavailable: Template 'chirpui/placeholder_inline.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/placeholder_inline.html" import placeholder_inline %}

{{ placeholder_inline() }}

playlist

Playlist component

data-display stable available
    Content
Copy-paste
{% from "chirpui/playlist.html" import playlist, playlist_item %}

{% call playlist(title="Up next") %}
    {% call playlist_item(href="/watch/1", title="Video 1", duration="4:32", active=true) %}{% end %}
    {% end %}
    {% call playlist_item(href="/watch/2", title="Video 2", duration="8:15") %}{% end %}
    {% end %}
{% end %}

playlist-item

Playlist component

data-display stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_playlist_item() missing 2 required positional arguments: 'href' and 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/playlist.html" import playlist_item %}  4 |   |

Copy-paste
{% from "chirpui/playlist.html" import playlist, playlist_item %}

{% call playlist(title="Up next") %}
    {% call playlist_item(href="/watch/1", title="Video 1", duration="4:32", active=true) %}{% end %}
    {% end %}
    {% call playlist_item(href="/watch/2", title="Video 2", duration="8:15") %}{% end %}
    {% end %}
{% end %}

popover

Popover component

overlay stable available
Filters
Copy-paste
{% from "chirpui/popover.html" import popover %}

{% call popover(trigger_label="Filters") %}
    {% slot header %}<h3>Filters</h3>{% end %}
    <form>...</form>
    {% slot footer %}<button>Apply</button>{% end %}
{% end %}

post-card

Post Card component

data-display stable available
avatar(src="...", alt="Alice", size="md")
Alice @alice

Check out this amazing sunset! 🌅

Sunset
action_bar_item(icon="up", label="Vote up", count=42)
Legacy: post_card_header, post_card_body, post_card_media, post_card_actions still available for backward compatibility.
Copy-paste
{% from "chirpui/post_card.html" import post_card %}

    {% call post_card(name="Alice", handle="@alice", time="2h ago") %}
        {% slot avatar %}avatar(src="...", alt="Alice", size="md"){% end %}
        {% slot media %}<img src="sunset.jpg" alt="Sunset">{% end %}
        {% slot actions %}action_bar_item(icon="up", label="Vote up", count=42){% end %}
        <p>Check out this amazing sunset! 🌅</p>
    {% end %}

Legacy: post_card_header, post_card_body, post_card_media, post_card_actions
still available for backward compatibility.

primary-nav

Primary navigation

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_primary_nav() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/primary_nav.html" import primary_nav %}  4 |   |

Copy-paste
{% from "chirpui/primary_nav.html" import primary_nav %}

{{ primary_nav() }}

profile-header

Profile Header component

data-display stable available
Content
Copy-paste
{% from "chirpui/profile_header.html" import profile_header, profile_header_avatar, ... %}

    {% call profile_header(name="Alice", cover_url="/cover.jpg", use_slots=true) %}
        {% slot avatar %}avatar(initials="AC", alt="Alice", size="lg"){% end %}
        {% slot bio %}<p class="chirpui-profile-header__bio">Developer & designer</p>{% end %}
        {% slot stats %}stat(value="1.2K", label="Followers") stat(value="42", label="Following"){% end %}
        {% slot actions %}btn("Follow", variant="primary"){% end %}
    {% end %}

Legacy (default): profile_header_avatar, profile_header_info, profile_header_stats, profile_header_action

progress

feedback stable available

Preview unavailable: Runtime Error: Macro 'progress' not found in template 'chirpui/progress.html' Location: chirpui/layout.html Suggestion: Check the imported template defines this macro. Verify name and import path.

Copy-paste
{% from "chirpui/progress.html" import progress %}

{{ progress() }}

progress-bar

Progress Bar component

feedback stable available
Copy-paste
{% from "chirpui/progress.html" import progress_bar %}

{{ progress_bar(value=60, max=100) }}
{{ progress_bar(value=75, max=100, color="#78c850") }}

prose

typography stable preferred

Preview unavailable: Template 'chirpui/prose.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/prose.html" import prose %}

{{ prose() }}

prose-lg

typography legacy compatibility

Preview unavailable: Template 'chirpui/prose_lg.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/prose_lg.html" import prose_lg %}

{{ prose_lg() }}

prose-sm

typography legacy compatibility

Preview unavailable: Template 'chirpui/prose_sm.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/prose_sm.html" import prose_sm %}

{{ prose_sm() }}

pulsing-btn

Pulsing Button

effect experimental available
Copy-paste
{% from "chirpui/pulsing_button.html" import pulsing_button %}

{{ pulsing_button("Try Now") }}
{{ pulsing_button("Go Live", icon="◎", href="/live") }}

reaction-pill

Reaction Pill component

interactive stable available
Copy-paste
{% from "chirpui/reaction_pill.html" import reaction_pill, message_reactions %}

{% call message_reactions() %}
    {{ reaction_pill(emoji="👍", count=3) }}
    {{ reaction_pill(emoji="❤", count=1) }}
{% end %}

reasoning

Reasoning + tool-call disclosure

layout stable available
Thought for 4s

First I checked the schema…

search_docs — done
done
query
css scope
3 matches
  • docs/CSS.md
Copy-paste
{% from "chirpui/reasoning.html" import reasoning_block, tool_call_card %}
{% call reasoning_block(label_pending="Thinking…", label_done="Thought for 4s", done=true) %}
    <p>First I checked the schema…</p>
{% end %}
{{ tool_call_card("search_docs", status="done",
                  args=[{"term": "query", "detail": "css scope"}],
                  result="3 matches", files=["docs/CSS.md"]) }}

rendered-content

Rendered content

typography stable available
Content
Copy-paste
{% from "chirpui/rendered_content.html" import rendered_content %}

{% call rendered_content() %}
  Content
{% end %}

resource-card

data-display experimental available

Preview unavailable: Template 'chirpui/resource_card.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/resource_card.html" import resource_card %}

{{ resource_card() }}

resource-index

Resource Index composite

composite stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_resource_index() missing 2 required positional arguments: 'title' and 'search_action' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/resource_index.html" import resource_index %}  4 |   |

Copy-paste
{% from "chirpui/resource_index.html" import resource_index %}

{% call resource_index() %}
  Content
{% end %}

result-card

Dense workspace primitives

data-display experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_result_card() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/workspace_primitives.html" import result_card %}  4 |   |

Copy-paste
{% from "chirpui/workspace_primitives.html" import result_card %}

{% call result_card() %}
  Content
{% end %}

result-collection

Dense workspace primitives

data-display experimental available
Content
Copy-paste
{% from "chirpui/workspace_primitives.html" import result_collection %}

{% call result_collection() %}
  Content
{% end %}

result-slot

feedback experimental available

Preview unavailable: Template 'chirpui/result_slot.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/result_slot.html" import result_slot %}

{{ result_slot() }}

reveal-on-scroll

Reveal on scroll — animate content when it enters the viewport

effect experimental available

This content animates in when you scroll it into view.

See https://alpinejs.dev/plugins/intersect
Copy-paste
{% from "chirpui/reveal_on_scroll.html" import reveal_on_scroll %}

    {% call reveal_on_scroll() %}
        <p>This content animates in when you scroll it into view.</p>
    {% end %}

See https://alpinejs.dev/plugins/intersect

ripple-btn

Ripple Button

effect experimental available
Copy-paste
{% from "chirpui/ripple_button.html" import ripple_button %}

{{ ripple_button("Click Me") }}
{{ ripple_button("Save", variant="primary") }}

route-tab

Route-backed subsection tabs

navigation stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_render_route_tabs() missing 2 required positional arguments: 'tab_items' and 'current_path' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/route_tabs.html" import render_route_tabs %}  4 |   |

Copy-paste
{% from "chirpui/route_tabs.html" import render_route_tabs %}

{{ render_route_tabs() }}

route-tabs

navigation stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_route_tabs() missing 2 required positional arguments: 'tabs' and 'current_path' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/route_tabs.html" import route_tabs %}  4 |   |

Copy-paste
{% from "chirpui/route_tabs.html" import route_tabs %}

{{ route_tabs() }}

row-actions

Row actions (kebab menu)

control stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_row_actions() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/row_actions.html" import row_actions %}  4 |   |

Copy-paste
{% from "chirpui/row_actions.html" import row_actions %}

{{ row_actions(items=[ }}
    {"label": "Edit", "href": "/items/1/edit"},
    {"label": "Duplicate", "action": "duplicate"},
    {"divider": true},
    {"label": "Delete", "href": "/items/1/delete", "variant": "danger", "icon": "✕"}
], id="row-1-actions")

rubber-band

effect experimental available

Preview unavailable: Template 'chirpui/rubber_band.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/rubber_band.html" import rubber_band %}

{{ rubber_band() }}

rune-field

Rune Field

effect experimental available

Mystical content

Arcane styled runes

Copy-paste
{% from "chirpui/rune_field.html" import rune_field %}

{% call rune_field() %}
    <h1>Mystical content</h1>
{% end %}

{% call rune_field(variant="arcane") %}
    <p>Arcane styled runes</p>
{% end %}

saved-view-strip

Saved view strip

navigation stable available
Copy-paste
{% from "chirpui/saved_view_strip.html" import saved_view_strip %}

{% call saved_view_strip() %}
  Content
{% end %}

scanline

Scanline Overlay

effect experimental available

Retro terminal text

Full CRT feel with rounded corners and vignette
Copy-paste
{% from "chirpui/scanline.html" import scanline %}

{% call scanline() %}
    <p>Retro terminal text</p>
{% end %}

{% call scanline(variant="crt") %}
    <div>Full CRT feel with rounded corners and vignette</div>
{% end %}

scope-indicator

Parameter override controls

form stable available
Using model default
Copy-paste
{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

scope-switcher

Scope switcher

navigation stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_scope_switcher() missing 2 required positional arguments: 'label' and 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/scope_switcher.html" import scope_switcher %}  4 |   |

Copy-paste
{% from "chirpui/scope_switcher.html" import scope_switcher %}

{{ scope_switcher() }}

scroll-area

Scroll Area

layout stable available
...
Copy-paste
{% from "chirpui/scroll_area.html" import scroll_area %}

{% call scroll_area(max_block_size="18rem") %}
    ...
{% end %}

scroll-x

layout legacy compatibility

Preview unavailable: Template 'chirpui/scroll_x.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/scroll_x.html" import scroll_x %}

{{ scroll_x() }}

search-bar

Form field macros

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_search_bar() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forms.html" import search_bar %}  4 |   |

Copy-paste
{% from "chirpui/forms.html" import search_bar %}

{{ search_bar() }}

search-header

Search Header composite

layout experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_search_header() missing 2 required positional arguments: 'title' and 'form_action' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/search_header.html" import search_header %}  4 |   |

Copy-paste
{% from "chirpui/search_header.html" import search_header %}

{{ search_header() }}

section-collapsible

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_section_collapsible() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/layout.html" import section_collapsible %}  4 |   |

Copy-paste
{% from "chirpui/layout.html" import section_collapsible %}

{% call section_collapsible() %}
  Content
{% end %}

section_header

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable available

actions

Copy-paste
{% from "chirpui/layout.html" import section_header %}

{% call section_header("actions") %}
  Content
{% end %}

segmented

Segmented Control

control stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_segmented_control() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/segmented_control.html" import segmented_control %}  4 |   |

Copy-paste
{% from "chirpui/segmented_control.html" import segmented_control %}

{{ segmented_control(items=[ }}
    {"label": "Grid", "value": "grid", "active": true},
    {"label": "List", "value": "list"},
    {"label": "Table", "value": "table"},
], name="view_mode")

{{ segmented_control(items=[ }}
    {"label": "Day", "value": "day", "icon": "◎"},
    {"label": "Week", "value": "week"},
    {"label": "Month", "value": "month"},
], name="range", size="sm")

selection-bar

Selection Bar

control stable available
Controlled mode (controlled=true): the bar is always in the DOM (no server count>0 gate) and uses Alpine `x-show`/`x-text` hooks so an enclosing `chirpuiGridSelection` scope can show/hide it and update the count with zero server roundtrip. Used by data_grid. Default `controlled=false` is byte-identical to the historical server-gated render.
Copy-paste
{% from "chirpui/selection_bar.html" import selection_bar %}

    {% call selection_bar(count=3) %}
        <a class="chirpui-btn chirpui-btn--sm chirpui-btn--secondary">Export selected</a>
        <a class="chirpui-btn chirpui-btn--sm chirpui-btn--secondary">Clear</a>
    {% end %}

Controlled mode (controlled=true): the bar is always in the DOM (no server
count>0 gate) and uses Alpine `x-show`/`x-text` hooks so an enclosing
`chirpuiGridSelection` scope can show/hide it and update the count with zero
server roundtrip. Used by data_grid. Default `controlled=false` is
byte-identical to the historical server-gated render.

separator

Separator

layout stable available
Copy-paste
{% from "chirpui/separator.html" import separator %}

{{ separator() }}
{{ separator(orientation="vertical", decorative=false) }}

settings-row

Settings row — label | status badge | detail

container stable available
Cursor IDE Configured dori setup cursor
Skills directory ok /path/to/skills
List modifiers: hoverable=true, divided=true, relaxed=true
Copy-paste
{% from "chirpui/settings_row.html" import settings_row_list, settings_row %}

    {% call settings_row_list() %}
        {{ settings_row("Cursor IDE", status="Configured", detail="dori setup cursor") }}
        {{ settings_row("Skills directory", status="ok", detail="/path/to/skills") }}
    {% end %}

List modifiers: hoverable=true, divided=true, relaxed=true

settings-row-list

Settings row — label | status badge | detail

container stable available
Cursor IDE Configured dori setup cursor
Skills directory ok /path/to/skills
List modifiers: hoverable=true, divided=true, relaxed=true
Copy-paste
{% from "chirpui/settings_row.html" import settings_row_list, settings_row %}

    {% call settings_row_list() %}
        {{ settings_row("Cursor IDE", status="Configured", detail="dori setup cursor") }}
        {{ settings_row("Skills directory", status="ok", detail="/path/to/skills") }}
    {% end %}

List modifiers: hoverable=true, divided=true, relaxed=true

shell-action-form

layout experimental available

Preview unavailable: Template 'chirpui/shell_action_form.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/shell_action_form.html" import shell_action_form %}

{{ shell_action_form() }}

shell-actions

Shell actions renderer

layout stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_shell_actions_bar() missing 1 required positional argument: 'shell_actions' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/shell_actions.html" import shell_actions_bar %}  4 |   |

Copy-paste
{% from "chirpui/shell_actions.html" import shell_actions_bar %}
    {{ shell_actions_bar(shell_actions) }}

kind="form" — POST form with optional HTMX (set hx_post, hx_target, … on ShellAction).
CSRF: {{ csrf_field() }} when include_csrf is true (Chirp provides csrf_field in globals).

id_suffix="" — append a per-instance suffix (e.g. "-drawer") to namespace the
overflow dropdown id and each menu action id when rendering the bar in two
{{ regions (e.g. a topbar copy plus a mobile drawer copy). Default "" preserves }}
the canonical ids, keeping every single-instance render byte-identical.
Threaded by shell_actions_bar into shell_action.

shell-section

layout experimental available

Preview unavailable: Template 'chirpui/shell_section.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/shell_section.html" import shell_section %}

{{ shell_section() }}

shimmer-btn

Shimmer Button

effect experimental available
Learn More
Copy-paste
{% from "chirpui/shimmer_button.html" import shimmer_button %}

{{ shimmer_button("Get Started") }}
{{ shimmer_button("Subscribe", variant="primary", size="lg") }}
{{ shimmer_button("Learn More", href="/docs", icon="→") }}

shortcuts-help

Keyboard shortcuts help

control stable available

Keyboard shortcuts

General

Show keyboard shortcuts
?
Open command palette
K
Close / cancel
Esc

Chat

Focus the message composer
/
Send message
Copy-paste
{% from "chirpui/shortcuts_help.html" import shortcuts_help, shortcuts_help_trigger %}
{{ shortcuts_help_trigger() }}
{{ shortcuts_help() }}

sidebar

Sidebar component

navigation stable available
Copy-paste
{% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, %}
shell_brand_link, shell_boosted_link

{% call sidebar() %}
    {% slot header %}<div class="chirpui-sidebar__brand">My App</div>{% end %}
    {% call sidebar_section("Main") %}
        {{ sidebar_link("/", "Home", match="exact") }}
        {{ sidebar_link("/dashboard", "Dashboard", match="prefix") }}
        {{ sidebar_link("/admin", "Admin", active=is_admin) }}
    {% end %}
    {% slot footer %}<span>v1.0</span>{% end %}
{% end %}

sidebar-toggle

Sidebar component

navigation stable available
Copy-paste
{% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, %}
shell_brand_link, shell_boosted_link

{% call sidebar() %}
    {% slot header %}<div class="chirpui-sidebar__brand">My App</div>{% end %}
    {% call sidebar_section("Main") %}
        {{ sidebar_link("/", "Home", match="exact") }}
        {{ sidebar_link("/dashboard", "Dashboard", match="prefix") }}
        {{ sidebar_link("/admin", "Admin", active=is_admin) }}
    {% end %}
    {% slot footer %}<span>v1.0</span>{% end %}
{% end %}

signature

Signature component

content stable available
def foo(x: int, y: str = '') -> bool:
GET /api/users
Copy-paste
{% from "chirpui/signature.html" import signature %}

{{ signature(text="def foo(x: int, y: str = '') -> bool:", language="python") }}
{{ signature(text="GET /api/users") }}

site-footer

Site Footer component

marketing experimental available
Copy-paste
{% from "chirpui/site_footer.html" import site_footer, footer_column, footer_link %}

{% call site_footer(layout="columns") %}
    {% slot brand %}
        <a href="/">Logo</a>
        <p>Tagline text.</p>
    {% end %}
    {% call footer_column(title="Product") %}
        {{ footer_link("/docs", "Docs") }}
        {{ footer_link("/pricing", "Pricing") }}
    {% end %}
    {% call footer_column(title="Company") %}
        {{ footer_link("/about", "About") }}
        {{ footer_link("https://github.com/...", "GitHub", external=true) }}
    {% end %}
    {% slot rule %}<span>•</span>{% end %}
    {% slot colophon %}© 2026 My Company{% end %}
{% end %}

site-header

Site Header component

marketing experimental available
Logo
theme_toggle()
LOGO
right linksCTA button
Copy-paste
{% from "chirpui/site_header.html" import site_header, site_nav_link %}

{% call site_header(brand_url="/", layout="start", variant="glass") %}
    {% slot brand %}<img src="/logo.svg" alt="Logo">{% end %}
    {% slot nav %}
        {{ site_nav_link("/docs", "Docs", glyph="#", match="prefix") }}
        {{ site_nav_link("/about", "About", match="exact") }}
    {% end %}
    {% slot tools %}theme_toggle(){% end %}
{% end %}

{% call site_header(layout="center-brand", variant="solid") %}
    {% slot nav %}left links{% end %}
    {% slot brand %}LOGO{% end %}
    {% slot nav_end %}right links{% end %}
    {% slot tools %}CTA button{% end %}
{% end %}

site-nav-link

Site Header component

marketing experimental available
Logo
theme_toggle()
LOGO
right linksCTA button
Copy-paste
{% from "chirpui/site_header.html" import site_header, site_nav_link %}

{% call site_header(brand_url="/", layout="start", variant="glass") %}
    {% slot brand %}<img src="/logo.svg" alt="Logo">{% end %}
    {% slot nav %}
        {{ site_nav_link("/docs", "Docs", glyph="#", match="prefix") }}
        {{ site_nav_link("/about", "About", match="exact") }}
    {% end %}
    {% slot tools %}theme_toggle(){% end %}
{% end %}

{% call site_header(layout="center-brand", variant="solid") %}
    {% slot nav %}left links{% end %}
    {% slot brand %}LOGO{% end %}
    {% slot nav_end %}right links{% end %}
    {% slot tools %}CTA button{% end %}
{% end %}

site-shell

Site Shell component

marketing experimental available
site_header(...)
Page content here
site_footer(...)
Copy-paste
{% from "chirpui/site_shell.html" import site_shell %}

{% call site_shell(ambient=true) %}
    {% slot header %}site_header(...){% end %}
    Page content here
    {% slot footer %}site_footer(...){% end %}
{% end %}

skeleton

Skeleton component

feedback stable available
Copy-paste
{% from "chirpui/skeleton.html" import skeleton %}

{{ skeleton() }}
{{ skeleton(width="200px", height="2rem") }}
{{ skeleton(variant="avatar") }}
{{ skeleton(variant="text", lines=3) }}
{{ skeleton(variant="card") }}

slider

Slider

control stable available
40
Copy-paste
{% from "chirpui/slider.html" import slider %}

{{ slider("volume", value=40, min=0, max=100, label="Volume", show_value=true) }}

sortable

Sortable list macros

interactive stable available
Content
Copy-paste
{% from "chirpui/sortable_list.html" import sortable_list, sortable_item %}

{% call sortable_list() %}
  for step in steps
    {% call sortable_item() %}
      ...
    {% end %}
  {% end %}
{% end %}

sources-summary

Citations

layout stable available
Copy-paste
{% from "chirpui/citations.html" import citation_chip, sources_summary, citation_modal %}
{{ citation_chip(index=1, title="Scope spec", href="https://x.test/doc",
                 source_id="src-1") }}
{{ sources_summary(sources=[{"id": "src-1", "title": "Scope spec",
                             "href": "https://x.test/doc", "relevance": "high"}]) }}

sparkle

Sparkle

effect experimental available

Golden text

Copy-paste
{% from "chirpui/sparkle.html" import sparkle %}

{% call sparkle() %}
    <button>✨ Magic Button</button>
{% end %}

{% call sparkle(variant="gold", count=4) %}
    <h2>Golden text</h2>
{% end %}

spinner

Spinner component

feedback stable available
Copy-paste
{% from "chirpui/spinner.html" import spinner, spinner_thinking %}

{{ spinner()  # Mote pulse animation }}
{{ spinner(size="sm")  # Small size }}
{{ spinner(size="lg")  # Large size }}

{{ spinner_thinking()  # Spiral rotation animation }}

spinner-thinking

feedback experimental available

Preview unavailable: Template 'chirpui/spinner_thinking.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/spinner_thinking.html" import spinner_thinking %}

{{ spinner_thinking() }}

split-btn

Split button component

control stable available
Inside a form (primary = submit):
Copy-paste
{% from "chirpui/split_button.html" import split_button %}

{% call split_button("Save", primary_href="/save", variant="primary") %}
    <a href="/save-as">Save as...</a>
    <a href="/export">Export</a>
{% end %}

Inside a form (primary = submit):
{% call split_button("Submit", primary_submit=true, variant="primary") %}
    <button type="button" formaction="/draft">Save draft</button>
{% end %}

split-flap

ASCII Split-Flap Display

ascii stable available
Single display: HELLO WORLD Departure board:
DEPARTURES
08:42 GRAND CENTRAL ON TIME TRACK 7
09:15 PENN STATION DELAYED TRACK 3
Variants: default, amber, green. animate=true adds the flip-in stagger effect.
Copy-paste
{% from "chirpui/ascii_split_flap.html" import split_flap, split_flap_row, split_flap_board %}

    Single display:
    {{ split_flap("HELLO WORLD") }}

    Departure board:
    {% call split_flap_board(title="DEPARTURES") %}
        {{ split_flap_row(cells=["08:42", "GRAND CENTRAL", "ON TIME", "TRACK 7"]) }}
        {{ split_flap_row(cells=["09:15", "PENN STATION", "DELAYED", "TRACK 3"]) }}
    {% end %}

Variants: default, amber, green.
animate=true adds the flip-in stagger effect.

split-flap-board

ascii experimental available

Preview unavailable: Template 'chirpui/split_flap_board.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/split_flap_board.html" import split_flap_board %}

{{ split_flap_board() }}

split-flap-row

ascii experimental available

Preview unavailable: Template 'chirpui/split_flap_row.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/split_flap_row.html" import split_flap_row %}

{{ split_flap_row() }}

split-layout

Split layout

layout stable available
Editor
Copy-paste
{% from "chirpui/split_layout.html" import split_layout %}

{% call split_layout(ratio="sidebar") %}
{% slot primary %}<nav>Tree</nav>{% end %}
{% slot secondary %}<main>Editor</main>{% end %}
{% end %}

split-panel

Split Panel

layout stable available
Content
Top pane
Bottom pane
Copy-paste
{% from "chirpui/split_panel.html" import split_panel %}

{% call split_panel() %}
    {% slot left %}
        <nav>Sidebar</nav>
    {% end %}
    {% slot right %}
        <main>Content</main>
    {% end %}
{% end %}

{% call split_panel(direction="vertical", default_split=30, min_split=20, max_split=80) %}
    {% slot left %}Top pane{% end %}
    {% slot right %}Bottom pane{% end %}
{% end %}

spotlight-card

Spotlight Card

effect experimental available

Highlighted

This card has a rotating spotlight

Accent spotlight

Copy-paste
{% from "chirpui/spotlight_card.html" import spotlight_card %}

{% call spotlight_card() %}
    <h3>Highlighted</h3>
    <p>This card has a rotating spotlight</p>
{% end %}

{% call spotlight_card(variant="accent") %}
    <p>Accent spotlight</p>
{% end %}

sse-retry

feedback experimental available

Preview unavailable: Template 'chirpui/sse_retry.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/sse_retry.html" import sse_retry %}

{{ sse_retry() }}

sse-status

SSE connection status and error recovery

feedback stable available
Connected
Copy-paste
{% from "chirpui/sse_status.html" import sse_status, sse_retry %}

Connection indicator (shows dot + label):
    {{ sse_status("connected") }}
    {{ sse_status("error", label="Connection lost") }}

Retry button (re-fetches the SSE endpoint):
    {{ sse_retry("/api/stream/123", label="Reconnect") }}

Inside a streaming bubble on error:
    {% call streaming_bubble(role="assistant", streaming=false) %}
        <p>Connection lost.</p>
        {{ sse_retry("/api/stream/123") }}
    {% end %}

stack

Layout primitives — container, grid (flow), frame (structural), stack, cluster, layer (overlap deck), block.

layout stable preferred
Content
Copy-paste
{% from "chirpui/layout.html" import stack %}

{% call stack() %}
  Content
{% end %}

star-rating

control stable available

Preview unavailable: Template 'chirpui/star_rating.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/star_rating.html" import star_rating %}

{{ star_rating() }}

stat

Stat component

data-display stable available
1.2K Followers
42 Videos
Copy-paste
{% from "chirpui/stat.html" import stat %}

{{ stat(value="1.2K", label="Followers") }}
{{ stat(value="42", label="Videos", icon="▶") }}

status-indicator

Status Indicator component

feedback stable available
Running
Live
Copy-paste
{% from "chirpui/status.html" import status_indicator %}

{{ status_indicator("Running", variant="success") }}
{{ status_indicator("Live", color="#78c850") }}

status-step

Status timeline

layout stable available
  1. Reading results
Copy-paste
{% from "chirpui/status_timeline.html" import status_timeline, status_step %}
{% call status_timeline() %}
    {{ status_step(action_type="search", label="Searched docs", done=true,
                   query_chips=["css scope", "@layer"], count=12) }}
    {{ status_step(action_type="read", label="Reading results", done=false) }}
{% end %}

status-timeline

Status timeline

layout stable available
  1. Reading results
Copy-paste
{% from "chirpui/status_timeline.html" import status_timeline, status_step %}
{% call status_timeline() %}
    {{ status_step(action_type="search", label="Searched docs", done=true,
                   query_chips=["css scope", "@layer"], count=12) }}
    {{ status_step(action_type="read", label="Reading results", done=false) }}
{% end %}

stepper

Stepper component

navigation stable available
Steps: list of {id, label}. current: 1-based index of active step.
Copy-paste
{% from "chirpui/stepper.html" import stepper %}

    {{ stepper(steps=[{"id": "1", "label": "Details"}, {"id": "2", "label": "Review"}, {"id": "3", "label": "Confirm"}], current=2) }}

Steps: list of {id, label}. current: 1-based index of active step.

story-card

Story Card

marketing stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_story_card() missing 2 required positional arguments: 'customer' and 'outcome' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/story_card.html" import story_card %}  4 |   |

Copy-paste
{% from "chirpui/story_card.html" import story_card %}

{{ story_card( }}
    customer="Acme",
    outcome="Reduced review time",
    summary="Teams debugged production runs without escalating.",
    href="/customers/acme",
    metric="80%",
)

streaming

feedback stable available

Preview unavailable: Runtime Error: Macro 'streaming' not found in template 'chirpui/streaming.html' Location: chirpui/layout.html Suggestion: Check the imported template defines this macro. Verify name and import path.

Copy-paste
{% from "chirpui/streaming.html" import streaming %}

{{ streaming() }}

streaming-block

feedback stable available

Preview unavailable: Template 'chirpui/streaming_block.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/streaming_block.html" import streaming_block %}

{{ streaming_block() }}

streaming_bubble

Streaming and AI components

feedback stable available
Content
Copy-paste
{% from "chirpui/streaming.html" import streaming_block, copy_btn, prose %}

{% call streaming_block(streaming=true) %}
    Content or thinking...
{% end %}

{% call copy_btn(text="Copy", copy_text=answer_text) %}

{{ prose(content | markdown | safe(reason="markdown output")) }}

surface

Surface component

container stable available
Content
Copy-paste
{% from "chirpui/surface.html" import surface %}

    {% call surface(variant="muted") %}
        <p>Content on muted background.</p>
    {% end %}

    {% call surface(variant="elevated", full_width=true) %}
        Hero section content.
    {% end %}

    {% call surface(variant="default", padding=false, full_width=true, cls="my-card", %}
        style="--accent: #0a0; background: linear-gradient(...)")
        Custom background overrides variant fill (e.g. type-tinted cards).
    {% end %}

Optional: style (inline CSS), attrs / attrs_map (extra HTML attributes; same as btn).

Variants: default, muted, elevated, accent, gradient-subtle, gradient-accent, gradient-border, gradient-mesh, glass, frosted, smoke

suspense-group

feedback experimental available

Preview unavailable: Template 'chirpui/suspense_group.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/suspense_group.html" import suspense_group %}

{{ suspense_group() }}

symbol-rain

Symbol Rain

effect experimental available

Hero content with falling symbols

Golden symbol cascade

Copy-paste
{% from "chirpui/symbol_rain.html" import symbol_rain %}

{% call symbol_rain() %}
    <h1>Hero content with falling symbols</h1>
{% end %}

{% call symbol_rain(variant="gold", count=8) %}
    <p>Golden symbol cascade</p>
{% end %}

tab

Tabs component

navigation stable available
... tab content loaded via htmx ...
Copy-paste
{% from "chirpui/tabs.html" import tabs, tab %}

{% call tabs(active="overview") %}
    {{ tab("overview", "Overview", url="/tabs/overview", hx_target="#content") }}
    {{ tab("details", "Details", url="/tabs/details", hx_target="#content") }}
{% end %}

<div id="tab-content"> ... tab content loaded via htmx ... </div>

tab-panel

navigation stable available

Preview unavailable: Template 'chirpui/tab_panel.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/tab_panel.html" import tab_panel %}

{{ tab_panel() }}

table

Table component

data-display stable available
Content
Copy-paste
{% from "chirpui/table.html" import table, row %}

    Slot-based (complex rows):
    {% call table(headers=["Name", "Email", "Role"]) %}
        {{ row("Alice", "alice@example.com", "Admin") }}
        {{ row("Bob", "bob@example.com", "User") }}
    {% end %}

    Data-driven (alignment flows to all cells automatically):
    {{ table(headers=["Name", "Status", "Count"], }}
          rows=[("Alice", "Active", "42"), ("Bob", "Idle", "7")],
          align=["left", "center", "right"])

    Per-column alignment (slot-based, auto-inherited):
    {% call table(headers=["Name", "Status", "Count"], %}
               align=["left", "center", "right"])
        {{ row("Alice", "Active", "42") }}
    {% end %}

    Column widths (CSS values or proportions):
    {% call table(headers=["Name", "Status"], %}
               widths=["2fr", "1fr"])

    Slots: caption (table caption), row_actions (header cell for actions column).
    Sortable headers:
    {% call table(headers=["Name", "Email"], sortable=true, %}
               sort_url="/users", hx_target="#user-table")
        {{ row(user.name, user.email) }}
    {% end %}
    Row with actions: pass row_actions(...) as last cell when actions_header=true
    Sticky header:
    {% call table(headers=[...], sticky_header=true) %}{% end %}

Sorting note (legacy): table(sortable=true, sort_url=...) emits a plain
`hx-get`-on-`<th>` sort using `header|lower` as the sort key — kept
byte-identical for backward compatibility. For interactive grids with
aria-sort, stable sort keys, server sort state, row selection, sticky first
column, and HTMX load-more, use `data_grid` (chirpui/data_grid.html), which
is backed by the typed `chirp_ui.grid_state` helper.

Additive selection/sticky params (additive; default off = byte-identical):
    {{ table(rows=..., selectable=true, row_id="id", selection=selection_state, }}
          sticky_first_col=true)
`selection` is a chirp_ui.grid_state.SelectionState; `row_id` is the dict
{{ key (or index) used to resolve each row's stable id for the checkbox value. }}

table-wrap

Table component

data-display stable available
Content
Copy-paste
{% from "chirpui/table.html" import table, row %}

    Slot-based (complex rows):
    {% call table(headers=["Name", "Email", "Role"]) %}
        {{ row("Alice", "alice@example.com", "Admin") }}
        {{ row("Bob", "bob@example.com", "User") }}
    {% end %}

    Data-driven (alignment flows to all cells automatically):
    {{ table(headers=["Name", "Status", "Count"], }}
          rows=[("Alice", "Active", "42"), ("Bob", "Idle", "7")],
          align=["left", "center", "right"])

    Per-column alignment (slot-based, auto-inherited):
    {% call table(headers=["Name", "Status", "Count"], %}
               align=["left", "center", "right"])
        {{ row("Alice", "Active", "42") }}
    {% end %}

    Column widths (CSS values or proportions):
    {% call table(headers=["Name", "Status"], %}
               widths=["2fr", "1fr"])

    Slots: caption (table caption), row_actions (header cell for actions column).
    Sortable headers:
    {% call table(headers=["Name", "Email"], sortable=true, %}
               sort_url="/users", hx_target="#user-table")
        {{ row(user.name, user.email) }}
    {% end %}
    Row with actions: pass row_actions(...) as last cell when actions_header=true
    Sticky header:
    {% call table(headers=[...], sticky_header=true) %}{% end %}

Sorting note (legacy): table(sortable=true, sort_url=...) emits a plain
`hx-get`-on-`<th>` sort using `header|lower` as the sort key — kept
byte-identical for backward compatibility. For interactive grids with
aria-sort, stable sort keys, server sort state, row selection, sticky first
column, and HTMX load-more, use `data_grid` (chirpui/data_grid.html), which
is backed by the typed `chirp_ui.grid_state` helper.

Additive selection/sticky params (additive; default off = byte-identical):
    {{ table(rows=..., selectable=true, row_id="id", selection=selection_state, }}
          sticky_first_col=true)
`selection` is a chirp_ui.grid_state.SelectionState; `row_id` is the dict
{{ key (or index) used to resolve each row's stable id for the checkbox value. }}

tabs

Tabs component

navigation stable available
... tab content loaded via htmx ...
Copy-paste
{% from "chirpui/tabs.html" import tabs, tab %}

{% call tabs(active="overview") %}
    {{ tab("overview", "Overview", url="/tabs/overview", hx_target="#content") }}
    {{ tab("details", "Details", url="/tabs/details", hx_target="#content") }}
{% end %}

<div id="tab-content"> ... tab content loaded via htmx ... </div>

tabular

typography stable available

Preview unavailable: Template 'chirpui/tabular.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/tabular.html" import tabular %}

{{ tabular() }}

tag

Tag input component

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_tag_input() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/tag_input.html" import tag_input %}  4 |   |

Copy-paste
{% from "chirpui/tag_input.html" import tag_input %}

    {{ tag_input("tags", tags=["python", "rust"], label="Tags", }}
              add_url="/tags/add", remove_url="/tags/remove",
              placeholder="Add tag...")

When add_url/remove_url provided, renders add form and remove buttons.
Server: add_url accepts POST with "tag" param; remove_url accepts POST with "tag" param.

tag-browse

Tag browse — tray + selection badges for tag-filtered listings

control stable available
Copy-paste
{% from "chirpui/tag_browse.html" import tag_browse_tray, tag_selection_badges, tag_filter_actions %}

{% slot filters_panel %}
{{ tag_browse_tray("my-filters", "Filter by tags", all_tags, selected_tags, tag_toggle_url, clear_url) }}
{% end %}
{% slot selection %}
{{ tag_selection_badges(selected_tags, tag_toggle_url, clear_url) }}
{% end %}
{% slot filter_actions %}
{{ tag_filter_actions(selected_tags, clear_url) }}
{% end %}

tag-input

Tag input component

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_tag_input() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/tag_input.html" import tag_input %}  4 |   |

Copy-paste
{% from "chirpui/tag_input.html" import tag_input %}

    {{ tag_input("tags", tags=["python", "rust"], label="Tags", }}
              add_url="/tags/add", remove_url="/tags/remove",
              placeholder="Add tag...")

When add_url/remove_url provided, renders add form and remove buttons.
Server: add_url accepts POST with "tag" param; remove_url accepts POST with "tag" param.

text-muted

typography legacy compatibility

Preview unavailable: Template 'chirpui/text_muted.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/text_muted.html" import text_muted %}

{{ text_muted() }}

text-reveal

Text Reveal

effect experimental available
Welcome to the future

Bold statement

Copy-paste
{% from "chirpui/text_reveal.html" import text_reveal %}

{{ text_reveal("Welcome to the future") }}
{{ text_reveal("Bold statement", variant="gradient", tag="h1") }}

texture

effect experimental available

Preview unavailable: Template 'chirpui/texture.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/texture.html" import texture %}

{{ texture() }}

theme-toggle

Theme + style toggles

control stable available
Copy-paste
{% from "chirpui/theme_toggle.html" import theme_toggle, style_toggle, style_select %}
{{ theme_toggle() }}
{{ style_toggle() }}

thread-reader-layout

Thread reader layout

social experimental available
Copy-paste
{% from "chirpui/thread_reader_layout.html" import thread_reader_layout %}

{% call thread_reader_layout("attention_nav") %}
  Content
{% end %}

thumbs

control stable available

Preview unavailable: Template 'chirpui/thumbs.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/thumbs.html" import thumbs %}

{{ thumbs() }}

timeline

Timeline component

data-display stable available
Content
Copy-paste
{% from "chirpui/timeline.html" import timeline, timeline_item %}

    {{ timeline(items=[ }}
        {"title": "Created", "date": "Jan 1", "content": "Order placed"},
        {"title": "Shipped", "date": "Jan 3", "content": "In transit"}
    ])

    Or with slot:
    {% call timeline() %}
        {{ timeline_item("Created", "Jan 1", "Order placed") }}
        {{ timeline_item("Shipped", "Jan 3", "In transit") }}
    {% end %}

Variants:
    {{ timeline_item("Deployed", "Now", icon="◎", variant="success") }}
    {{ timeline_item("Error", "12:05", variant="error", avatar="/img/user.jpg") }}
    {{ timeline(hoverable=true) }}

Links:
    href defaults to a whole-row overlay link.
    link_mode="title" renders the title itself as the link.
Hints:
    item hint="..." or timeline_item(..., hint="...") wraps the title in a tooltip.

title-card

Media pattern assets

media experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_title_card() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/media_patterns.html" import title_card %}  4 |   |

Copy-paste
{% from "chirpui/media_patterns.html" import title_card %}

{% call title_card("actions") %}
  Content
{% end %}

toast

Toast component

feedback stable available
Place the container once in your base template:
Return a toast from any htmx response (OOB swap):
Server-driven status flow (HTMX-native promise pattern): # 1) POST handler returns pending toast with stable id
# 2) follow-up response replaces the same toast by id
Copy-paste
{% from "chirpui/toast.html" import toast, toast_container, toast_pending, toast_resolve %}

Place the container once in your base template:
    {{ toast_container() }}

Return a toast from any htmx response (OOB swap):
    {{ toast("Item saved successfully!", variant="success") }}
    {{ toast("Something went wrong.", variant="error", dismissible=true) }}

Server-driven status flow (HTMX-native promise pattern):
    # 1) POST handler returns pending toast with stable id
    {{ toast_pending("Saving…", id="save-item-42") }}
    # 2) follow-up response replaces the same toast by id
    {{ toast_resolve("Saved!", id="save-item-42", variant="success") }}
    {{ toast_resolve("Save failed.", id="save-item-42", variant="error") }}

toast-container

feedback stable available

Preview unavailable: Template 'chirpui/toast_container.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/toast_container.html" import toast_container %}

{{ toast_container() }}

toggle

control experimental available

Preview unavailable: Template 'chirpui/toggle.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/toggle.html" import toggle %}

{{ toggle() }}

toggle-group

Toggle Group

control stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_toggle_group() missing 1 required positional argument: 'items' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/toggle_group.html" import toggle_group %}  4 |   |

Copy-paste
{% from "chirpui/toggle_group.html" import toggle_group %}

{{ toggle_group(
    items=[
        {"label": "Bold", "value": "bold", "pressed": true},
        {"label": "Italic", "value": "italic"},
    ],
    name="format",
    type="multiple",
) }}

toggle-wrap

Form field macros

form stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_toggle_field() missing 1 required positional argument: 'name' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forms.html" import toggle_field %}  4 |   |

Copy-paste
{% from "chirpui/forms.html" import toggle_field %}

{{ toggle_field() }}

token-input

Token input

form experimental available
Copy-paste
{% from "chirpui/token_input.html" import token_input %}

{% call token_input("input") %}
  Content
{% end %}

tool-call

Reasoning + tool-call disclosure

layout stable available
Thought for 4s

First I checked the schema…

search_docs — done
done
query
css scope
3 matches
  • docs/CSS.md
Copy-paste
{% from "chirpui/reasoning.html" import reasoning_block, tool_call_card %}
{% call reasoning_block(label_pending="Thinking…", label_done="Thought for 4s", done=true) %}
    <p>First I checked the schema…</p>
{% end %}
{{ tool_call_card("search_docs", status="done",
                  args=[{"term": "query", "detail": "css scope"}],
                  result="3 matches", files=["docs/CSS.md"]) }}

tooltip

Tooltip macro

navigation stable available
Copy to clipboard Hover me Below the element Positions: top (default), bottom, left, right Use block=true when the trigger is block-level content such as a full nav row.
Copy-paste
{% from "chirpui/tooltip.html" import tooltip %}

    {% call tooltip("Copy to clipboard") %}
        <button>Copy</button>
    {% end %}

    {% call tooltip("Below the element", position="bottom") %}
        <span>Hover me</span>
    {% end %}

Positions: top (default), bottom, left, right
Use block=true when the trigger is block-level content such as a full nav row.

topic-card

Forum and social pattern assets

social experimental available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_topic_card() missing 1 required positional argument: 'title' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/forum_patterns.html" import topic_card %}  4 |   |

Copy-paste
{% from "chirpui/forum_patterns.html" import topic_card %}

{% call topic_card("badges") %}
  Content
{% end %}

tray

Tray (slide-out panel)

overlay stable available
Copy-paste
{% from "chirpui/tray.html" import tray, tray_trigger %}

{{ tray_trigger("filters", "Filters", icon="⚙") }}
{% call tray("filters", "Filters", position="right") %}
    <form>...</form>
{% end %}

tree

Tree view component

data-display stable available

Preview unavailable: Runtime Error: TypeError: render.<locals>._def_tree_view() missing 1 required positional argument: 'nodes' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/tree_view.html" import tree_view %}  4 |   |

Copy-paste
{% from "chirpui/tree_view.html" import tree_view %}

    {{ tree_view(nodes=[ }}
        {"id": "1", "label": "Docs", "children": [
            {"id": "1a", "label": "API", "children": []},
            {"id": "1b", "label": "Guide", "children": []}
        ]},
        {"id": "2", "label": "Source", "children": []}
    ])

nodes: list of {id, label, children} where children is list of same structure.
variant: "branch" (default), "explorer", or "plain".

trending-tag

Trending Tag component

data-display stable available
# python 12.5K # webdev 8.2K
Copy-paste
{% from "chirpui/trending_tag.html" import trending_tag %}

{{ trending_tag(tag="python", href="/tag/python", count="12.5K") }}
{{ trending_tag(tag="webdev", count="8.2K", trend="up") }}

truncate

layout legacy compatibility

Preview unavailable: Template 'chirpui/truncate.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/truncate.html" import truncate %}

{{ truncate() }}

typewriter

Typewriter Effect

effect experimental available
Hello, World!

Slower reveal

No cursor
Copy-paste
{% from "chirpui/typewriter.html" import typewriter %}

{{ typewriter("Hello, World!") }}
{{ typewriter("Slower reveal", speed="slow", tag="h2") }}
{{ typewriter("No cursor", cursor=false) }}

typing-indicator

Typing Indicator component

feedback stable available
Copy-paste
{% from "chirpui/typing_indicator.html" import typing_indicator %}

{{ typing_indicator() }}
{{ typing_indicator(cls="chirpui-ml-sm") }}

ui-base

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_base.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_base.html" import ui_base %}

{{ ui_base() }}

ui-bold

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_bold.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_bold.html" import ui_bold %}

{{ ui_bold() }}

ui-label

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_label.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_label.html" import ui_label %}

{{ ui_label() }}

ui-lg

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_lg.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_lg.html" import ui_lg %}

{{ ui_lg() }}

ui-medium

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_medium.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_medium.html" import ui_medium %}

{{ ui_medium() }}

ui-meta

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_meta.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_meta.html" import ui_meta %}

{{ ui_meta() }}

ui-normal

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_normal.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_normal.html" import ui_normal %}

{{ ui_normal() }}

ui-semibold

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_semibold.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_semibold.html" import ui_semibold %}

{{ ui_semibold() }}

ui-sm

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_sm.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_sm.html" import ui_sm %}

{{ ui_sm() }}

ui-title

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_title.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_title.html" import ui_title %}

{{ ui_title() }}

ui-xl

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_xl.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_xl.html" import ui_xl %}

{{ ui_xl() }}

ui-xs

typography legacy compatibility

Preview unavailable: Template 'chirpui/ui_xs.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/ui_xs.html" import ui_xs %}

{{ ui_xs() }}

video-card

Video Card component

data-display stable available
Copy-paste
{% from "chirpui/video_card.html" import video_card %}

{% call video_card(href="/watch/1", thumbnail="/thumb.jpg", duration="4:32", title="...") %}
    {% slot actions %}<button class="chirpui-video-card__menu">⋯</button>{% end %}
{% end %}

video-thumbnail

Video Thumbnail component

media stable available
Video title 4:32
4:32
Copy-paste
{% from "chirpui/video_thumbnail.html" import video_thumbnail %}

{{ video_thumbnail(href="/watch/1", src="/thumb.jpg", alt="Video title", duration="4:32") }}
{{ video_thumbnail(src="/thumb.jpg", duration="4:32", watched_pct=75) }}

visually-hidden

layout legacy compatibility

Preview unavailable: Template 'chirpui/visually_hidden.html' not found in: /Users/llane/conductor/workspaces/chirp-ui/jerusalem-v3/src/chirp_ui/templates

Copy-paste
{% from "chirpui/visually_hidden.html" import visually_hidden %}

{{ visually_hidden() }}

watch-companion-layout

Media pattern assets

media experimental available
Copy-paste
{% from "chirpui/media_patterns.html" import watch_companion_layout %}

{% call watch_companion_layout("companion") %}
  Content
{% end %}

wizard-form

Wizard form component

form stable available

Preview unavailable: Runtime Error: TypeError: _globals_setup.<locals>._def_wizard_form() missing 2 required positional arguments: 'id' and 'steps' Location: blocks-gallery-preview:2  |  1 | {% from "chirpui/layout.html" import stack %} > 2 | {% call stack() %}  3 | {% from "chirpui/wizard_form.html" import wizard_form %}  4 |   |

Copy-paste
{% from "chirpui/wizard_form.html" import wizard_form %}

    {% call wizard_form("checkout", steps=steps, current=step) %}
        <form hx-post="/wizard/step2" hx-target="#checkout" hx-swap="outerHTML">
            ...fields...
        </form>
    {% end %}

Backend: return the full wizard_form wrapper for fragment requests.

wobble

Wobble / Jello / Rubber-band / Bounce-in

effect experimental available
Jello on load
🎈 Stretch!
Appears with bounce
Copy-paste
{% from "chirpui/wobble.html" import wobble, jello, rubber_band, bounce_in %}

{% call wobble(trigger="hover") %}
    <button>Hover me</button>
{% end %}

{% call jello() %}
    <div>Jello on load</div>
{% end %}

{% call rubber_band(trigger="hover") %}
    <span>🎈 Stretch!</span>
{% end %}

{% call bounce_in() %}
    <div class="chirpui-card">Appears with bounce</div>
{% end %}

workspace-shell

Workspace shell

layout experimental available
Content
Copy-paste
{% from "chirpui/workspace_shell.html" import workspace_shell %}

{% call workspace_shell("Authoring", subtitle="Edit content", sidebar_title="Files", show_inspector=true, inspector_title="Preview") %}
{% slot toolbar %}{{ btn("Save", variant="primary", size="sm") }}{% end %}
{% slot sidebar %}<nav>Tree</nav>{% end %}
<textarea></textarea>
{% slot inspector %}<div>Preview</div>{% end %}
{% end %}