Recipes¶

Use these patterns when you know the kind of product you want to build and want a practical starting point.

Executive dashboard¶

Use:

Grid
Card
Stat
Table
AreaChart
BarChart
DateRangePicker
MultiSelect
Drawer

Good examples:

Chatbot workspace¶

Use:

ChatMessage
ChatInput
Card
Toast
Drawer
Timeline
Accordion
Breadcrumbs

Recommended pattern:

Keep the conversation in use_state.
Use Card blocks for user and assistant messages.
Use a Drawer for traces, sources, or tool results.
Use Toast for completion or send-state feedback.
Use ChatInput.on_submit for the action that calls your model, job, or backend route.

Landing page or internal product site¶

Use:

Card
Grid
SparklineStat
Accordion
Timeline
Button
Badge

Recommended pattern:

Lead with a hero Card.
Use a 3-column feature grid.
Add a roadmap Timeline.
Use Accordion for FAQ.
Keep the theme calm and whitespace-heavy.

Pipeline command center¶

Use:

PipelineGraph
StatusStrip
GaugeChart
ComposedChart
Heatmap
ScatterChart
Stat
AreaChart
BarChart
DonutChart
Table
Breadcrumbs
DateRangePicker
MultiSelect
Drawer

Recommended pattern:

Start in mock mode.
Keep every metric visible as plain values and charts.
Add drilldown with row click or chart click.
Use empty_message and loading aggressively so the app stays honest while data loads.
Use PipelineGraph.on_node_click to open a drawer, select a node, or filter a table.

Pipeline graph plus triage board¶

Use:

PipelineGraph
KanbanBoard
Drawer
Table
Alert

Recommended pattern:

Keep pipeline nodes as dictionaries with id, label, layer, and status.
Keep edges as dictionaries with from and to.
Store the selected node in use_state.
Send delayed or failed nodes into KanbanBoard columns.
Use a Drawer or Card to show details for the selected node/card.

selected, set_selected = db.use_state("No node selected")

db.PipelineGraph(
    nodes=nodes,
    edges=edges,
    on_node_click=lambda node: set_selected(node["id"]),
)