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

Section

rx.section

Official docs

Workshop order

Split the about page into chunks such as 'Features' and 'Pricing', and give each chunk generous space above and below.

rx.section marks one part of a page's content. It renders as an HTML <section> element and comes with vertical padding by default. Above all it is a semantic component: use it to group related content, such as one heading and the text that belongs to it.

First

This is the first content section

Second

This is the second content section

rx.box(
    rx.section(
        rx.heading("First", as_="h2", size="4"),
        rx.text("This is the first content section"),
        padding_x="12px",
        background_color="var(--gray-2)",
    ),
    rx.section(
        rx.heading("Second", as_="h2", size="4"),
        rx.text("This is the second content section"),
        padding_x="12px",
        background_color="var(--gray-3)",
    ),
    width="100%",
)

Try the props

Section has a single prop, size, which sets the amount of vertical padding. Watch the empty space between the dashed lines change.

Try the props

Features

Vertical padding comes from the size prop.

size

rx.box(
    rx.section(
        rx.heading("Features", as_="h2", size="4"),
        rx.text("Vertical padding comes from the size prop."),
        size="2",
        padding_x="12px",
        background_color="var(--accent-2)",
        border_top="1px dashed var(--accent-8)",
        border_bottom="1px dashed var(--accent-8)",
    ),
    width="100%",
)

size 1 gives 24px of vertical padding, 2 gives 40px, 3 gives 64px. There is no horizontal padding, so add it separately with padding_x.

Prop	Values	Default	Use
`size`	`"1"` (24px) `"2"` (40px) `"3"` (64px)	`"2"`	Vertical padding
`padding_x` and other CSS	CSS length	none	There is no horizontal padding by default

size accepts rx.breakpoints(...) to vary by screen width. Radix Themes also has size="4" (80px), but rx.section in the installed 0.10 only accepts "1"–"3".

Three sizes

Three Sections that differ only in size, side by side. The text is the same; only the vertical padding changes.

size 1

size 2

size 3

rx.flex(
    rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
    rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
    rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
    spacing="3",
    align="start",
    width="100%",
)

Different padding per screen width

To shrink the padding on phones and grow it on wide screens, pass rx.breakpoints to size.

Small padding on phones, more on wide screens

rx.section(
    rx.text("Small padding on phones, more on wide screens"),
    size=rx.breakpoints(initial="1", md="3"),
    padding_x="12px",
    background_color="var(--gray-3)",
    width="100%",
)

How it differs from Box

rx.box is a meaningless <div>; rx.section is a <section> that means "a part starts here". Screen readers and search engines read this distinction as the structure of the document. Give each part a title with rx.heading and the structure becomes clearer still. A common pattern is to hold the page width with rx.container and split the inside into Sections.

Filling the order

A Container holds the body width, and 'Features' and 'Pricing' each get their own Section. The rx.separator() between them shows where one part ends and the next begins.

Features

Pure Python, from the front end to the back end.

Pricing

Free to start. Pay when your app grows.

rx.container(
    rx.section(
        rx.heading("Features", as_="h2", size="5"),
        rx.text("Pure Python, from the front end to the back end."),
        size="2",
    ),
    rx.separator(),
    rx.section(
        rx.heading("Pricing", as_="h2", size="5"),
        rx.text("Free to start. Pay when your app grows."),
        size="2",
    ),
    size="2",
    width="100%",
)

Workshop notes

rx.section is a <section> element: a semantic component that groups related content into one part.
size "1"–"3" gives 24 · 40 · 64px of vertical padding. The default is "2".
There is no horizontal padding, so add it with padding_x.
Give each part a title with rx.heading.
Hold the width with rx.container and split the inside with rx.section.

← Previous

Layout · Container

Layout · Center

Get news about new lessons

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