ui.stack

Stack & flex

Rows and columns with a spacing scale — vstack and hstack for the everyday case, flex for the full axis API.

A vertical list

ui.vstack puts its children one under the other, with a gap from the theme's spacing scale.

Inbox

Drafts

Scheduled

A horizontal row

ui.hstack centres its children vertically by default — the usual intent for a row.

Lena Park[email protected]

def horizontal() -> None:
    with (ui.card(padding="md", classes="w-full max-w-lg"),
          ui.hstack(gap="md", justify="between")):
        with ui.hstack(gap="sm"):
            ui.avatar(src="https://i.pravatar.cc/96?u=lena", name="Lena Park",
                      size="md")
            with ui.vstack(gap="none"):
                ui.text("Lena Park", weight="medium")
                ui.text("[email protected]", size="sm", color="muted")
        ui.button("Message", icon_left="send", variant="outline", size="sm")

Distribute along the row

justify="start"

justify="center"

justify="end"

justify="between"

def justify_row(justify: str) -> None:
    with ui.vstack(gap="xs"):
        ui.text(f'justify="{justify}"', size="xs", color="muted",
                classes="font-mono")
        with ui.card(padding="xs"), ui.hstack(gap="sm", justify=justify):
            ui.button("Back", icon_left="arrow-left", variant="ghost", size="sm")
            ui.button("Save draft", variant="outline", size="sm")
            ui.button("Publish", icon_left="send", size="sm")


def justify() -> None:
    with ui.vstack(gap="md", classes="w-full"):
        for value in ("start", "center", "end", "between"):
            justify_row(value)

Let it wrap

wrap=True sends the overflow to the next line instead of squeezing the tags.

PythonFastAPIPostgreSQLRedisTailwindHTMXDockerPlaywrightServer-sent events

def wrapping() -> None:
    with ui.hstack(gap="sm", wrap=True, justify="center", classes="max-w-md"):
        for tag in ("Python", "FastAPI", "PostgreSQL", "Redis", "Tailwind",
                    "HTMX", "Docker", "Playwright", "Server-sent events"):
            ui.badge(tag, variant="soft", color="secondary")

A filter bar that shares the width

grow="16rem" gives each field a 16rem basis, then shares what is left; below that they wrap.

Plan

Country

def filter_bar() -> None:
    with ui.hstack(gap="md", wrap=True, grow="16rem", align="end",
                   classes="w-full"):
        with ui.form_field(label="Search"):
            ui.input(placeholder="Name, email or company", icon_left="search")
        with ui.form_field(label="Plan"):
            ui.select(options=["All plans", "Starter", "Team", "Scale"],
                      value="All plans")
        with ui.form_field(label="Country"):
            ui.select(options=["Anywhere", "France", "Germany", "Spain"],
                      value="Anywhere")

Change direction with the window

ui.flex takes a breakpoint dict: a column on a phone, a row from md upwards.

SidebarStacks on top on a phone.

Main contentTakes the remaining width once the window is wide enough for two columns.

def responsive() -> None:
    with ui.flex(direction={"base": "col", "md": "row"}, gap="md",
                 classes="w-full"):
        with ui.card(padding="md", classes="md:w-56"), ui.vstack(gap="sm"):
            ui.text("Sidebar", weight="medium")
            ui.text("Stacks on top on a phone.", size="sm", color="muted")
        with ui.card(padding="md", classes="flex-1"), ui.vstack(gap="sm"):
            ui.text("Main content", weight="medium")
            ui.text("Takes the remaining width once the window is wide "
                    "enough for two columns.", size="sm", color="muted")