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

Center

rx.center

Official docs

Workshop order

Put an icon and a short message right in the middle of the empty cart screen.

rx.center places its children in the horizontal and vertical center of itself. It is built on rx.flex, takes all of Flex's props, and comes with centering styles (align_items and justify_content set to center) built in. Use it whenever something belongs in the middle: empty-state messages, icon badges, loading indicators.

Hello World!

rx.center(
    rx.text("Hello World!"),
    border="4px solid var(--gray-7)",
    border_radius="15px",
    width="50%",
    padding="12px",
)

Try the props

The centering shows when the box is bigger than its content. Change the width and height, and the cards always stay right in the middle.

Try the props

Card 1

Card 2

Card 3

direction

spacing

width

height

rx.center(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    direction="row",
    spacing="3",
    width="100%",
    height="12rem",
    border="1px dashed var(--gray-7)",
    border_radius="8px",
)

Set direction to column and the cards stack vertically while staying centered. spacing is the gap between the cards.

Prop	Values	Default	Use
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Direction several children line up in
`spacing`	`"0"` ~ `"9"`	none	Gap between children
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Wrap to the next line on overflow
`width` `height`	CSS length	fits content	Size of the area to center within
`as_child`	`True` / `False`	`False`	Render as the child element and merge the props

It also accepts Flex's align and justify, but Center has already set both to center, so you rarely need them.

Writing it with rx.flex

Center is shorthand for rx.flex(..., align="center", justify="center"). The two boxes give exactly the same result.

rx.center

rx.flex + align + justify

rx.flex(
    rx.center(rx.text("rx.center"), width="45%", height="6rem", background_color="var(--gray-3)"),
    rx.flex(
        rx.text("rx.flex + align + justify"),
        align="center",
        justify="center",
        width="45%",
        height="6rem",
        background_color="var(--gray-3)",
    ),
    justify="between",
    width="100%",
)

Icon badges

Give it equal width and height and round the corners, and you get a round badge holding an icon or a number. Center takes care of putting the content in the middle.

rx.flex(
    rx.center(rx.icon("check", color="var(--grass-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--grass-3)"),
    rx.center(rx.icon("x", color="var(--red-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--red-3)"),
    rx.center(rx.text("42", weight="bold"), width="48px", height="48px", border_radius="8px", background_color="var(--accent-3)"),
    spacing="3",
)

Filling the order

direction="column" stacks the icon, heading, message and button vertically, centered inside a generous min_height. To center on the whole page, use min_height="100vh".

Your cart is empty

Add something you like.

rx.center(
    rx.icon("shopping-cart", size=40, color="var(--gray-9)"),
    rx.heading("Your cart is empty", size="4"),
    rx.text("Add something you like.", size="2", color="var(--gray-11)"),
    rx.button("Go shopping", variant="soft"),
    direction="column",
    spacing="3",
    width="100%",
    min_height="16rem",
    border="1px dashed var(--gray-6)",
    border_radius="8px",
)

Workshop notes

rx.center puts its children in the horizontal and vertical center.
It equals rx.flex(align="center", justify="center") and takes Flex's props as is.
For the centering to show, the box must be bigger than its content: width · height · min_height.
Stack several children and space them with direction and spacing.

← Previous

Layout · Section

Layout · Spacer

Get news about new lessons

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