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

Separator

rx.separatorrx.divider

Official docs

Workshop order

On a profile card, put a thin divider line between the name section and the contact section.

rx.separator draws a thin line between pieces of content to split them up. It is a visual divider, and when needed it also tells screen readers "things split here". rx.divider is another name for the same component, so use whichever you like.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.separator(),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
    align="center",
)

Try the props

To see a vertical line, set orientation to vertical and the outer direction to row. A vertical line takes its length from the parent's height (10rem here).

Try the props

Section 1

Section 2

size

orientation

direction

color

rx.flex(
    rx.card("Section 1"),
    rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
    rx.card("Section 2"),
    direction="column",
    spacing="4",
    align="center",
    width="100%",
    height="10rem",
)

size is the line's length, orientation its direction, color_scheme its color. direction is the direction of the outer Flex.

Prop	Values	Default	Use
`size`	`"1"` (16px) `"2"` (32px) `"3"` (64px) `"4"` (100%)	`"4"`	Line length
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	Horizontal or vertical line
`color_scheme`	Radix color name	`"gray"`	Line color
`decorative`	`True` / `False`	`True`	With True it is purely decorative and left out of the accessibility tree. Use False for a meaningful division

size and orientation accept rx.breakpoints(...) to vary by screen width. The Radix Themes default size is "1", but rx.separator in the installed 0.10 sets the default to "4", so with nothing given it fills its parent.

Length: size

size="4" fills the parent's width (or height, for a vertical line). Setting CSS width or height to "100%" does the same, but size works the same way regardless of direction. "1"–"3" are fixed lengths.

rx.flex(
    rx.separator(size="1"),
    rx.separator(size="2"),
    rx.separator(size="3"),
    rx.separator(size="4"),
    direction="column",
    spacing="4",
    width="100%",
)

Direction: orientation

orientation="vertical" makes a vertical line. A vertical line can only stretch with size="4" if the parent has a height. This one uses the rx.divider name, as the official docs do.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.divider(orientation="vertical", size="4"),
    rx.card("Section 2"),
    spacing="4",
    width="100%",
    height="10vh",
)

Short vertical lines between words

Within a single line, such as between menu links, a short vertical line with size="1" works best. Give the outer Flex align="center" and the lines sit at the middle height of the text.

HomeBlogAbout

rx.flex(
    rx.link("Home", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("Blog", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("About", href="#"),
    spacing="3",
    align="center",
)

Filling the order

A horizontal line goes between the name section and the contact section, and margin_y gives it some breathing room above and below.

Jamie Kim

Potter

jamie@example.com

555-0100

rx.card(
    rx.flex(
        rx.avatar(fallback="JK"),
        rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
        spacing="3",
        align="center",
    ),
    rx.separator(margin_y="12px"),
    rx.vstack(
        rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
        rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
        spacing="2",
    ),
    width="260px",
)

Workshop notes

rx.separator (= rx.divider) draws a line between pieces of content.
size "1"–"4" = 16 · 32 · 64px · 100%. The 0.10 default is "4" (fills the parent).
orientation="vertical" makes a vertical line. It needs a parent with a height to stretch.
color_scheme sets the color; decorative=False marks the division as meaningful.

← Previous

Layout · Spacer

Layout · Card

Get news about new lessons

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