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

Box

rx.box

Official docs

Workshop order

Wrap a notice in a soft background with rounded corners so it stands out from the body text at a glance.

rx.box is the most basic container. It is a block element built on HTML's div, used to group other components and style the group. Box has no props of its own; you shape it by passing CSS properties such as background, spacing and border as keyword arguments.

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

Try the props

A Box's look comes entirely from CSS style properties. In Python you replace the - in CSS names with _ (background-color → background_color).

Try the props

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

Change the background, padding, border, corners and width. They are all CSS properties, so the values are plain CSS too.

Prop	Values	Default	Use
`width` `height`	CSS length (`"200px"`, `"50%"`)	fits content	Size of the box
`padding` `margin`	CSS length, or split like `padding_x` · `margin_top`	`0`	Inner and outer spacing
`background_color` `background`	Color name, `var(--tomato-3)`, gradient, `url(…)`	none	Background color or image
`border` `border_radius`	`"1px solid var(--gray-7)"`, `"8px"`	none	Border and corner roundness
`title`	Text	none	Tooltip shown on hover
`hidden` `role` `tab_index`	HTML attributes	none	Hiding, accessibility role, tab order
`on_click` `on_mouse_enter` …	Event handler	none	Base events every component has

Colors: CSS names and Radix colors

There are three ways to give a color: a CSS color name like "orange", a Radix color variable like var(--tomato-3) (or the equivalent rx.color("plum", 3)), and var(--accent-2), which follows the site theme's accent color. Radix colors come in steps 1–12; the lower the number, the lighter the shade, suited to backgrounds.

The official docs example passes radius="full" to the last box, but Box has no radius prop, so it does nothing. Round the corners with border_radius instead.

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

Backgrounds: gradients and images

The single CSS background property can lay down a gradient or an image. linear-gradient changes color along a line, radial-gradient spreads out from a point. Add an image with url(…), and center/cover fills the box from the center.

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

Events and HTML attributes

Box has the base events every component has (on_click, on_mouse_enter, on_mouse_leave and so on). Hover over the box below and click it. Give it a title and a tooltip appears when the pointer rests on it.

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

Filling the order

A soft background and a strong left border mark it as a notice, and padding keeps the text off the border.

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

Workshop notes

rx.box is a block container built on div. Use it to group and style.
It has no props of its own. Pass CSS properties like width · padding · background_color · border_radius with _ names.
Colors: CSS names, var(--tomato-3) or rx.color("tomato", 3), and the theme accent var(--accent-N).
One background property lays down gradients (linear · radial) and url(…) images.
Base events like on_click · on_mouse_enter and HTML attributes like title · hidden work too.

← Previous

Course overview

Layout · Flex

Get news about new lessons

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