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

Data display

Data List

rx.data_list.rootrx.data_list.itemrx.data_list.labelrx.data_list.value

Official docs

Workshop order

On the order detail screen, neatly lay out the status, order date, tracking number and total as 'label: value' pairs.

rx.data_list shows label and value pairs in rows. It suits metadata such as user info, order details or file properties. Put rx.data_list.item elements inside rx.data_list.root, and give each item one label and one value.

Status: Authorized
ID: U-474747

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status"),
        rx.data_list.value("Authorized"),
    ),
    rx.data_list.item(
        rx.data_list.label("ID"),
        rx.data_list.value("U-474747"),
    ),
)

Try the props

orientation, size and trim go on root, align on item, and color_scheme on label.

Try the props

Status: Authorized
Name: Developer Success
Email: success@reflex.dev

orientation

size

trim

align

label_color

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status", color_scheme="gray"),
        rx.data_list.value(rx.badge("Authorized", radius="full")),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Name", color_scheme="gray"),
        rx.data_list.value("Developer Success"),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Email", color_scheme="gray"),
        rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        align="center",
    ),
    orientation="horizontal",
    size="2",
    trim="normal",
)

Switch orientation to vertical and the label moves above the value. align is the vertical alignment of label and value within an item.

Part	Prop	Values	Use
`root`	`orientation`	`"horizontal"` (default) `"vertical"`	Label and value side by side or stacked
`root`	`size`	`"1"` `"2"` (default) `"3"`	Font size and line spacing
`root`	`trim`	`"normal"` `"start"` `"end"` `"both"`	Trims the text spacing above the first line and below the last
`item`	`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	Vertical alignment of label and value
`label`	`width` `min_width` `max_width`	CSS length	Width of the label column
`label`	`color_scheme`	Radix color name	Color of the label text
`value`	(none)		Accepts any component as children

Anything in the value slot

value can hold components such as badges, code or links, not just text. Put it in a card as the official docs example does, and you have an info box. When a value has a different height, like a badge, give that item align="center" to center it with its label.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: success@reflex.dev
Company: Reflex

rx.card(
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full")),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("ID"),
            rx.data_list.value(rx.code("U-474747")),
        ),
        rx.data_list.item(
            rx.data_list.label("Name"),
            rx.data_list.value("Developer Success"),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("Email"),
            rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        ),
        rx.data_list.item(
            rx.data_list.label("Company"),
            rx.data_list.value(rx.link("Reflex", href="https://reflex.dev", is_external=True)),
        ),
    ),
)

Orientation

orientation goes on root. On narrow screens, stacked (vertical) is easier to read. As in the third example, you can also give a different value per screen width (vertical when narrow, horizontal from sm up).

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

rx.flex(
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="horizontal",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="vertical",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation={"initial": "vertical", "sm": "horizontal"},
    ),
    spacing="6",
    wrap="wrap",
)

Tidying the label column

Fix the label column's width with width on label, and the values of several lists start on the same line. color_scheme changes the color of the label text.

Owner: Ada Lovelace
Repository: reflex-dev/reflex

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Owner", width="80px", color_scheme="indigo"),
        rx.data_list.value("Ada Lovelace"),
    ),
    rx.data_list.item(
        rx.data_list.label("Repository", width="80px", color_scheme="indigo"),
        rx.data_list.value("reflex-dev/reflex"),
    ),
)

Building items from data

When the items live in data, build one row at a time with rx.foreach. The props preview in the official docs works this way too.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: foo@reflex.dev

class DataListUserState(rx.State):
    fields: list[list[str]] = [
        ["Status", "Authorized"],
        ["ID", "U-474747"],
        ["Name", "Developer Success"],
        ["Email", "foo@reflex.dev"],
    ]


rx.data_list.root(
    rx.foreach(
        DataListUserState.fields,
        lambda f: rx.data_list.item(rx.data_list.label(f[0]), rx.data_list.value(f[1])),
    ),
)

Filling the order

Use the order number as the heading, then show the status as a badge, the tracking number as code and the total in bold.

Order #1024

Status: Shipped
Placed: 2026-10-20
Tracking: 1Z999AA10123456784
Total: $48.00

rx.card(
    rx.heading("Order #1024", size="4", margin_bottom="3"),
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Shipped", color_scheme="green", radius="full")),
            align="center",
        ),
        rx.data_list.item(rx.data_list.label("Placed"), rx.data_list.value("2026-10-20")),
        rx.data_list.item(rx.data_list.label("Tracking"), rx.data_list.value(rx.code("1Z999AA10123456784"))),
        rx.data_list.item(rx.data_list.label("Total"), rx.data_list.value(rx.text("$48.00", weight="bold"))),
    ),
    max_width="420px",
)

Workshop notes

Structure: data_list.root > data_list.item > (data_list.label, data_list.value).
root: orientation · size · trim; item: align; label: width · color_scheme.
value takes any component: badges, code, links and more.
When the data is a list, build the items with rx.foreach.

← Previous

Data display · List

Data display · Code Block

Get news about new lessons

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