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

Container

rx.container

Official docs

Workshop order

Keep text from spreading endlessly across a wide monitor: hold the body text to a comfortable reading width.

rx.container caps the maximum width of its content and leaves the space on either side as margin, putting the content in the center. When the screen is narrower than the maximum width, the content narrows with it, which makes it a good fit for responsive screens. It usually wraps the whole body of a page.

This content is at most 448px wide.

rx.box(
    rx.container(
        rx.card("This content is at most 448px wide.", width="100%"),
        size="1",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Try the props

The gray background is the outer area and the card is inside the Container. This preview pane is narrow, so sizes 3 and 4 look as if they fill the whole pane.

Try the props

Page content

size

padding

rx.box(
    rx.container(
        rx.card("Page content", width="100%"),
        size="1",
        padding="16px",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

The larger the size, the wider the maximum inner width. padding is the inner spacing (16px) that Reflex adds by default.

Prop	Values	Default	Use
`size`	`"1"` (448px) `"2"` (688px) `"3"` (880px) `"4"` (1136px)	`"3"`	Maximum width of the content
`padding`	CSS length	`"16px"`	Inner spacing. Reflex's `create` adds it by default
`stack_children_full_width`	`True` / `False`	`False`	Make vstack · hstack inside, and children such as their inputs, 100% wide

size accepts rx.breakpoints(...) to vary by screen width. padding and stack_children_full_width are not Radix props but arguments added by rx.container in the installed 0.10.

Four sizes

This is the official docs example. Each Container widens only up to its own maximum within the outer width, and sits in the center.

size 1: max 448px

size 2: max 688px

size 3: max 880px

size 4: max 1136px

rx.box(
    rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
    rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
    rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
    rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
    background_color="var(--gray-3)",
    width="100%",
)

Making inner stacks fill the width

By default a Stack sets its children to align="start", so inputs take up only their own width. With stack_children_full_width=True, the stacks inside the Container, along with the div · input · select · textarea · table children directly under them, become 100% wide. Buttons (button elements) are not included. The left is the default, the right has it turned on.

rx.flex(
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        background_color="var(--gray-3)",
    ),
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        stack_children_full_width=True,
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

A different size per screen width

To keep things narrow on phones and wider on large screens, pass rx.breakpoints to size.

1 on phones, 2 from md, 3 from lg

rx.box(
    rx.container(
        rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
        size=rx.breakpoints(initial="1", md="2", lg="3"),
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Filling the order

The article is held to size="2" (at most 688px). Even on a wide monitor the lines don't get too long, so it stays easy to read.

Notes from the workshop

Posted on Monday

A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.

The container keeps this column narrow on wide screens.

rx.box(
    rx.container(
        rx.vstack(
            rx.heading("Notes from the workshop", size="6"),
            rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
            rx.text(
                "A long line of text is hard to read. "
                "Keeping the column narrow helps the eye find the next line.",
            ),
            rx.text("The container keeps this column narrow on wide screens."),
            spacing="3",
        ),
        size="2",
        padding_y="24px",
    ),
    background_color="var(--gray-2)",
    width="100%",
)

Workshop notes

rx.container caps the content's maximum width and centers it. Use it to wrap a page's body.
size "1"–"4" = 448 · 688 · 880 · 1136px. The default is "3".
Reflex adds padding="16px" by default. Change it if you need to.
With stack_children_full_width=True, inner stacks and children such as inputs become 100% wide (buttons excluded).
It can vary by screen width, as in size=rx.breakpoints(initial="1", lg="3").

← Previous

Layout · Grid

Layout · Section

Get news about new lessons

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