ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Layout

Stack

rx.stackrx.hstackrx.vstack

Official docs

Workshop order

Stack the items of a settings screen from top to bottom with even spacing, and inside each item put the icon and the label side by side.

A Stack piles its children in one direction with a fixed gap between them. rx.vstack stacks vertically, rx.hstack horizontally, and rx.stack in a direction you choose. All three are built on rx.flex and take Flex's props as they are. What differs is the defaults: the gap (spacing="3") and alignment (align="start") are preset.

Card 1

Card 2

Card 3

rx.vstack(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
)

Try the props

Change the direction, spacing and alignment of rx.stack. Only the middle box is taller, so the effect of align shows in the horizontal direction.

Try the props

Example

direction

spacing

align

justify

rx.stack(
    rx.box("Example", background_color="orange", border_radius="3px", padding="4px", width="20%"),
    rx.box("Example", background_color="lightblue", border_radius="3px", padding="4px", width="30%", height="3rem"),
    rx.box("Example", background_color="lightgreen", border_radius="3px", padding="4px", width="40%"),
    direction="column",
    spacing="3",
    align="start",
    justify="start",
    width="100%",
    min_height="12rem",
    padding="8px",
    border="1px dashed var(--gray-7)",
)

Set direction to column and it behaves like vstack; leave it at row and it behaves like hstack. Set spacing to 0 and the items stack with no gap.

Prop	Values	Default	Use
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`vstack` `"column"`, `hstack` `"row"`, `stack` none (horizontal)	Stacking direction
`spacing`	`"0"` ~ `"9"`	`"3"`	Gap between children
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"start"`	Cross-axis alignment. With stretch, children fill the cross axis
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Alignment along the stacking direction (main axis)
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Whether to wrap to the next line on overflow
`as_child`	`True` / `False`	`False`	Render as the child element and merge the props

Every prop works just as in Flex and accepts rx.breakpoints(...) to vary by screen width.

rx.stack: choosing the direction yourself

rx.stack has no default direction, so left alone it stacks horizontally. The official docs set the direction with the CSS property flex_direction; the installed 0.10 also has Flex's direction prop, so both work. Below, the left one uses flex_direction="row" and the right one direction="column".

Example

rx.flex(
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        flex_direction="row",
        width="100%",
    ),
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        direction="column",
        width="100%",
    ),
    width="100%",
)

hstack

Stacks horizontally. Give each child a different width and it takes up space in that proportion.

Example

rx.hstack(
    rx.box("Example", bg="red", border_radius="3px", width="10%"),
    rx.box("Example", bg="orange", border_radius="3px", width="10%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="60%"),
    width="100%",
)

vstack

Stacks vertically. Use it almost anywhere you lay out a screen from top to bottom.

Example

rx.vstack(
    rx.box("Example", bg="red", border_radius="3px", width="20%"),
    rx.box("Example", bg="orange", border_radius="3px", width="40%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="60%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="80%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="100%"),
    width="100%",
)

When children don't fill the width

Stack's default align is "start", so buttons inside a vstack only take up the width of their label. To make children fill the width, set align="stretch" or give the children width="100%". The left is the default, the right is stretch.

rx.flex(
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        width="140px",
    ),
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        align="stretch",
        width="140px",
    ),
    spacing="6",
)

Like a real screen

Two boxes with a heading and text sit side by side in an hstack. Instead of spacing, you can also give any length you like directly with CSS gap, such as "2em".

Saving Money

Set aside a small part of every pay day.

Spending Money

Balance today's wishes and tomorrow's needs.

rx.hstack(
    rx.box(
        rx.heading("Saving Money", as_="h2", size="4"),
        rx.text("Set aside a small part of every pay day.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    rx.box(
        rx.heading("Spending Money", as_="h2", size="4"),
        rx.text("Balance today's wishes and tomorrow's needs.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    gap="2em",
)

Filling the order

The outer vstack stacks the items, and each item uses an hstack to put the icon, label and switch side by side. The rx.spacer() in the middle pushes the switch to the right edge.

Notifications

Dark mode

Weekly email

rx.vstack(
    rx.hstack(rx.icon("bell"), rx.text("Notifications"), rx.spacer(), rx.switch(default_checked=True), align="center", width="100%"),
    rx.hstack(rx.icon("moon"), rx.text("Dark mode"), rx.spacer(), rx.switch(), align="center", width="100%"),
    rx.hstack(rx.icon("mail"), rx.text("Weekly email"), rx.spacer(), rx.switch(), align="center", width="100%"),
    spacing="4",
    width="100%",
    max_width="320px",
)

Workshop notes

vstack is vertical, hstack is horizontal, stack takes its direction from direction.
All three are built on Flex, so direction · align · justify · wrap · spacing work as is.
The defaults differ: spacing "3", align "start".
To make children fill the cross axis, use align="stretch" or width="100%" on the children.
An inner hstack + rx.spacer() to pin something to one edge is a common pattern.

← Previous

Layout · Flex

Layout · Grid

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.