Layout Components¶

Layout components are context managers — render child components inside a with block.

Column¶

A vertical flex column. The default layout for stacking components top-to-bottom.

Signature

Column(*, gap="var(--s-4)", align="stretch", justify="flex-start", width="100%")

Parameter	Type	Default	Description
`gap`	`str`	`"var(--s-4)"`	CSS gap between children
`align`	`str`	`"stretch"`	`align-items` CSS value
`justify`	`str`	`"flex-start"`	`justify-content` CSS value
`width`	`str`	`"100%"`	CSS width

Example

with ui.Column(gap="var(--s-6)"):
    ui.Heading("My App", level=1)
    ui.Text("Welcome to FluxUI")
    ui.Button("Get started", variant="primary")

Row¶

A horizontal flex row. Great for button groups, metric cards, and toolbars.

Signature

Row(*, gap="var(--s-4)", align="center", justify="flex-start", wrap=False)

Parameter	Type	Default	Description
`gap`	`str`	`"var(--s-4)"`	CSS gap between children
`align`	`str`	`"center"`	`align-items` CSS value
`justify`	`str`	`"flex-start"`	`justify-content` CSS value
`wrap`	`bool`	`False`	Whether items wrap onto multiple lines

Example

with ui.Row(justify="space-between", align="center"):
    ui.Heading("Dashboard", level=2)
    ui.Button("Export", variant="secondary")

Grid¶

A CSS grid container. Use cols to set the number of equal-width columns.

Signature

Grid(*, cols=2, gap="var(--s-4)")

Parameter	Type	Default	Description
`cols`	`int`	`2`	Number of equal columns
`gap`	`str`	`"var(--s-4)"`	Gap between grid cells

Example

with ui.Grid(cols=3, gap="var(--s-4)"):
    ui.Metric(label="Users",    value="1,234", delta="+12%")
    ui.Metric(label="Revenue",  value="$56,789", delta="+3%")
    ui.Metric(label="Uptime",   value="99.9%")

Card¶

An elevated container with an optional title and description. The most common wrapper for grouped content.

Signature

Card(*, title="", description="", padding="var(--s-6)")

Parameter	Type	Default	Description
`title`	`str`	`""`	Bold heading shown at the top of the card
`description`	`str`	`""`	Muted subtitle shown below the title
`padding`	`str`	`"var(--s-6)"`	CSS padding inside the card

Example

with ui.Card(title="User Profile", description="Edit your personal information"):
    ui.TextInput(label="Full name", placeholder="Jane Smith")
    ui.TextInput(label="Email",     placeholder="jane@example.com")
    ui.Button("Save changes")

Tabs / Tab¶

A tabbed interface. Place Tab children inside a Tabs context.

Signature

Tabs()
Tab(label)

Parameter	Type	Description
`label`	`str`	The text shown on the tab button

Example

with ui.Tabs():
    with ui.Tab("Overview"):
        ui.Text("Summary of your account.")
        ui.Metric(label="Balance", value="$1,200")

    with ui.Tab("Transactions"):
        ui.Table(data=transactions, columns=["date", "description", "amount"])

    with ui.Tab("Settings"):
        ui.Switch("Email notifications")
        ui.Switch("SMS alerts")

A dialog overlay. Control visibility with a ReactiveVar[bool] passed to open.

Signature

Modal(*, open, on_close, title="", width="540px")

Parameter	Type	Description
`open`	`ReactiveVar[bool]` \| `bool`	Whether the modal is visible
`on_close`	`Callable`	Called when the user closes the modal (ESC or overlay click)
`title`	`str`	Title shown in the modal header
`width`	`str`	CSS max-width of the modal panel

Example

@app.page("/")
def home(session):
    show_modal = ui.state(False)

    with ui.Column():
        ui.Button("Open dialog", on_click=lambda: show_modal.set(True))

        with ui.Modal(
            open=show_modal,
            on_close=lambda: show_modal.set(False),
            title="Confirm deletion",
        ):
            ui.Text("Are you sure you want to delete this item? This cannot be undone.")
            with ui.Row(justify="flex-end", gap="var(--s-2)"):
                ui.Button("Cancel", variant="secondary",
                          on_click=lambda: show_modal.set(False))
                ui.Button("Delete", variant="danger",
                          on_click=lambda: (show_modal.set(False), delete_item()))

A slide-in drawer panel. Useful for filters, secondary navigation, or settings.

Signature

Sidebar(*, open, on_close=None, width="280px", side="left")

Parameter	Type	Default	Description
`open`	`ReactiveVar[bool]` \| `bool`	—	Whether the sidebar is visible
`on_close`	`Callable` \| `None`	`None`	Called when user dismisses sidebar
`width`	`str`	`"280px"`	CSS width of the sidebar panel
`side`	`str`	`"left"`	`"left"` or `"right"`

Example

sidebar_open = ui.state(False)

with ui.Row():
    ui.Button("Filters", on_click=lambda: sidebar_open.set(True))

with ui.Sidebar(
    open=sidebar_open,
    on_close=lambda: sidebar_open.set(False),
    side="right",
    width="320px",
):
    ui.Heading("Filters", level=3)
    ui.Select(label="Status", options=["All", "Active", "Inactive"])
    ui.Slider(label="Price range", min=0, max=1000)

Accordion¶

A collapsible section with a clickable header.

Signature

Accordion(*, title, open=False)

Parameter	Type	Default	Description
`title`	`str`	—	Header text (always visible)
`open`	`bool`	`False`	Whether expanded on initial render

Example

with ui.Accordion(title="Advanced options", open=False):
    ui.Switch("Enable experimental features")
    ui.TextInput(label="Custom endpoint", placeholder="https://api.example.com")

with ui.Accordion(title="FAQ: How does billing work?"):
    ui.Text("You are billed monthly based on usage. See our pricing page for details.")

Divider¶

A simple horizontal rule for separating content sections.

Signature

Divider()

Example

with ui.Column():
    ui.Text("Section A content")
    ui.Divider()
    ui.Text("Section B content")

Layout Components¶

Column¶

Row¶

Grid¶

Card¶

Tabs / Tab¶

Modal¶

Sidebar¶

Accordion¶

Divider¶