Display Components¶

Display components render data and content. Most accept a ReactiveVar or callable so they automatically re-render when state changes.

Text¶

Renders a paragraph or inline text span.

Signature

Text(content, *, variant="body")

Parameter	Type	Default	Description
`content`	`str` \| `ReactiveVar[str]` \| callable	—	The text to display
`variant`	`str`	`"body"`	Typography style: `"body"` \| `"caption"` \| `"label"` \| `"muted"`

Example

ui.Text("Static text")
ui.Text(lambda: f"Count: {count.value}")          # reactive
ui.Text(some_reactive_var)                         # ReactiveVar passed directly
ui.Text("Small print here", variant="caption")
ui.Text("Field label", variant="label")
ui.Text("Grayed out note", variant="muted")

Heading¶

A section heading at levels 1–6 (maps to <h1>–<h6>).

Signature

Heading(content, *, level=1)

Parameter	Type	Default	Description
`content`	`str` \| callable	—	Heading text
`level`	`int`	`1`	Heading level 1–6

Example

ui.Heading("Dashboard", level=1)
ui.Heading("Recent Transactions", level=2)
ui.Heading("Filter options", level=3)

Code¶

A syntax-highlighted code block with an optional copy button.

Signature

Code(content, *, language="python", show_copy=True)

Parameter	Type	Default	Description
`content`	`str` \| callable	—	Code text to display
`language`	`str`	`"python"`	Language for syntax highlighting (Prism.js token)
`show_copy`	`bool`	`True`	Show a copy-to-clipboard button

Example

ui.Code(
    'import fluxui as ui\n\napp = ui.App("My App")\napp.run()',
    language="python",
)

ui.Code('{"key": "value"}', language="json")
ui.Code("SELECT * FROM users WHERE active = 1", language="sql")

Image¶

A responsive image element.

Signature

Image(src, *, alt="", width="100%", height="auto")

Parameter	Type	Default	Description
`src`	`str` \| callable	—	Image URL or data URI
`alt`	`str`	`""`	Alt text for accessibility
`width`	`str`	`"100%"`	CSS width
`height`	`str`	`"auto"`	CSS height

Example

ui.Image("https://picsum.photos/800/400", alt="Sample image")
ui.Image(lambda: current_user.avatar_url, alt="User avatar", width="64px", height="64px")

Badge¶

A small colored label for status or categorization.

Signature

Badge(text, *, variant="info")

Parameter	Type	Default	Description
`text`	`str` \| callable	—	Badge label text
`variant`	`str`	`"info"`	Color: `"info"` \| `"success"` \| `"warning"` \| `"danger"` \| `"neutral"`

Example

ui.Badge("Active",   variant="success")
ui.Badge("Warning",  variant="warning")
ui.Badge("Error",    variant="danger")
ui.Badge("New",      variant="info")
ui.Badge("Archived", variant="neutral")

# Reactive badge
ui.Badge(lambda: "Online" if user.online else "Offline",
         variant=lambda: "success" if user.online else "neutral")

Metric¶

A KPI card with a large value, label, optional delta, and optional help text. The delta automatically turns green when it starts with + and red when it starts with -.

Signature

Metric(*, label, value, delta="", delta_suffix="", help_text="")

Parameter	Type	Default	Description
`label`	`str`	—	Small label shown above the value
`value`	`str` \| `ReactiveVar[str]` \| callable	—	The primary large value
`delta`	`str` \| callable	`""`	Change indicator, e.g. `"+12%"` or `"-3%"`
`delta_suffix`	`str`	`""`	Text appended after the delta, e.g. `"vs last month"`
`help_text`	`str`	`""`	Tooltip text shown on hover

Example

ui.Metric(label="Total Users",  value="1,234",   delta="+12%")
ui.Metric(label="MRR",          value="$56,789", delta="+3.2%", delta_suffix="vs last month")
ui.Metric(label="Error rate",   value="0.02%",   delta="-0.01%")

# Reactive
ui.Metric(
    label="Active Sessions",
    value=lambda: f"{session_count.value:,}",
    delta=lambda: f"+{new_sessions.value}",
)

Progress¶

A progress bar from 0 to 100.

Signature

Progress(value, *, label="", show_value=True)

Parameter	Type	Default	Description
`value`	`float` \| `ReactiveVar[float]` \| callable	—	Progress value 0–100
`label`	`str`	`""`	Label shown above the bar
`show_value`	`bool`	`True`	Show the numeric percentage

Example

progress = ui.state(0)

ui.Progress(progress, label="Upload progress")
ui.Button("Simulate progress", on_click=lambda: progress.set(min(100, progress.value + 10)))

# Reactive progress from computed value
pct = ui.computed(lambda: (completed.value / total.value) * 100)
ui.Progress(pct, label="Completion")

Table¶

A basic HTML data table rendered from a list of dicts.

Signature

Table(data, *, columns=None, striped=True, hover=True)

Parameter	Type	Default	Description
`data`	`list[dict]` \| `ReactiveVar` \| callable	—	Row data
`columns`	`list[str]` \| `None`	`None`	Columns to show (defaults to all dict keys)
`striped`	`bool`	`True`	Alternate row background colours
`hover`	`bool`	`True`	Highlight rows on hover

Example

users = [
    {"name": "Alice", "email": "alice@example.com", "role": "Admin"},
    {"name": "Bob",   "email": "bob@example.com",   "role": "User"},
]

ui.Table(data=users, columns=["name", "email", "role"])

# Reactive table
filtered = ui.computed(lambda: [u for u in all_users if search.value in u["name"]])
ui.Table(data=filtered)

HTML¶

Renders arbitrary raw HTML. Use with care — content is not sanitized.

Signature

HTML(content)

Parameter	Type	Description
`content`	`str` \| callable	Raw HTML string

Example

ui.HTML("<strong>Bold</strong> and <em>italic</em> text")
ui.HTML('<a href="https://example.com" target="_blank">External link</a>')

Markdown¶

Renders a Markdown string to HTML.

Signature

Markdown(content)

Parameter	Type	Description
`content`	`str` \| `ReactiveVar[str]` \| callable	Markdown text

Example

ui.Markdown("""
## Installation

```bash
pip install fluxui

See the docs for more. """)

---

## Chart

Renders a Plotly figure. Requires `pip install "fluxui[charts]"`.

**Signature**
```python
Chart(figure, *, height="400px", config=None)

Parameter	Type	Default	Description
`figure`	`plotly.graph_objects.Figure` \| callable	—	Plotly figure object
`height`	`str`	`"400px"`	CSS height of the chart container
`config`	`dict` \| `None`	`None`	Plotly config dict (e.g. `{"displayModeBar": False}`)

Example

import plotly.graph_objects as go

fig = go.Figure(go.Bar(
    x=["Mon", "Tue", "Wed", "Thu", "Fri"],
    y=[120, 145, 98, 167, 210],
))
fig.update_layout(title="Daily Revenue", margin=dict(t=40, b=20))

ui.Chart(fig, height="350px")

# Reactive chart
def make_chart():
    df = load_data(period.value)
    return go.Figure(go.Scatter(x=df["date"], y=df["value"]))

ui.Chart(make_chart)  # re-renders when period changes

Plotly installation

ui.Chart requires Plotly. Install it with pip install "fluxui[charts]" or separately with pip install plotly.