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

HTML elements

HTML Text

rx.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr

Official docs

Workshop order

In a single line of release notes, mark the version, the date, the new shortcut and the removed feature, each with the right HTML text element.

These are the 26 HTML elements that give meaning to particular words within a sentence: emphasis, code, keyboard keys, quotations, superscripts, dates and so on. Most of them are inline elements that stay within a line of text, so you mix them into rx.el.p or rx.text. The browser gives them a default look (bold, italic, monospace), and search engines and screen readers pick up their meaning.

Press Ctrl + S to save your work.

rx.el.p(
    "Press ",
    rx.el.kbd("Ctrl"),
    " + ",
    rx.el.kbd("S"),
    " to ",
    rx.el.strong("save"),
    " your work.",
)

Try the props

Text elements have almost no attributes of their own; you work with common attributes and styles. Change the background of mark and the dir (text direction) of bdo.

Try the props

Reflex | Reflex | Reflex

word

mark_color

direction

size

rx.el.p(
    rx.el.mark("Reflex", background="yellow"),
    " | ",
    rx.el.bdo("Reflex", dir="rtl"),
    " | ",
    rx.el.small("Reflex"),
    font_size="18px",
)

Give bdo dir="rtl" and the order of the characters is reversed as is. mark and small change their look through styles.

Prop	Values	Default	Use
`value` (data)	string, number	none	Machine-readable value behind the human-readable text
`date_time` (time)	`"2026-05-01"`, `"09:00"` …	none	Standard format for a date or time
`cite` (q)	URL	none	Address of the quoted source (not shown on screen)
`title` (abbr, dfn)	string	none	Full form of an abbreviation. Shown on hover
`dir` (bdo, bdi)	`"ltr"` `"rtl"`	inherits from parent	Text direction
common attributes and styles	`id` `class_name` `color` …	none	Usable on every text element

Emphasis and meaning

Some pairs look the same but mean different things. strong is importance, b is just bold. em is spoken stress, i is a different voice (a term, a foreign word). u is an annotation that should be shown underlined, s is content that is no longer accurate, mark is a highlighter, and small is small side text.

strong important · b just bold

em stressed · i different voice

u annotated · s no longer true

mark highlighted · small side note

rx.el.div(
    rx.el.p(rx.el.strong("strong"), " important  ·  ", rx.el.b("b"), " just bold"),
    rx.el.p(rx.el.em("em"), " stressed  ·  ", rx.el.i("i"), " different voice"),
    rx.el.p(rx.el.u("u"), " annotated  ·  ", rx.el.s("s"), " no longer true"),
    rx.el.p(rx.el.mark("mark"), " highlighted  ·  ", rx.el.small("small"), " side note"),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Code and keyboard

code is a piece of code, kbd a key the user should press, samp output produced by a program. All three are shown in a monospace font.

Run reflex run in the terminal.

Then press Ctrl + C to stop.

The terminal prints: App running at http://localhost:3000

rx.el.div(
    rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
    rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
    rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Quotations, sources, definitions

q is a short quotation, and the browser adds quotation marks for you. The cite attribute holds the source address; the cite element holds the title of a work. dfn is a term defined on the spot, and abbr is an abbreviation with its full form in title.

As The Zen of Python says: Simple is better than complex.

A component is a reusable piece of UI.

rx.el.div(
    rx.el.p(
        "As ",
        rx.el.cite("The Zen of Python"),
        " says: ",
        rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
    ),
    rx.el.p(
        "A ",
        rx.el.dfn("component"),
        " is a reusable piece of ",
        rx.el.abbr("UI", title="User Interface"),
        ".",
    ),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Superscripts, subscripts, line breaks

sub and sup are for chemical formulas and exponents. br breaks the line right there, and wbr marks "it's OK to break the line here". The box below is narrow, so the long word is split at the wbr positions.

Water is H₂O. Energy is mc².

Line one
Line two after br

Supercalifragilisticexpialidocious

rx.el.div(
    rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
    rx.el.p("Line one", rx.el.br(), "Line two after br"),
    rx.el.p(
        "Super",
        rx.el.wbr(),
        "califragilistic",
        rx.el.wbr(),
        "expialidocious",
        width="120px",
        padding="6px",
        border="1px dashed gray",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

Machine-readable values

data and time show human-readable text on screen and hide a standard value for programs in an attribute. They look like ordinary text.

Price: $12

Opens on May 1st

Starts at 9 am

rx.el.div(
    rx.el.p("Price: ", rx.el.data("$12", value=12)),
    rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
    rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Text direction and ruby

bdi isolates text of unknown direction (such as a user name) from its surroundings, so the order doesn't get scrambled when right-to-left text is mixed in. bdo forces a direction. ruby and rt put a reading above characters such as kanji, and rp holds parentheses that only show in browsers that don't support ruby.

Winner: إيان - 3 points

bdo rtl: Hello

漢(kan)字(ji)

rx.el.div(
    rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
    rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
    rx.el.p(
        rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
        font_size="24px",
    ),
    display="flex",
    flex_direction="column",
    gap="6px",
)

Filling the order

The version is strong, the date time, the shortcut kbd, the removed feature s, the new one mark, and the extra notes small and abbr.

v2.1 · released Oct 24, 2026

Search now opens with Ctrl + K. ~~Slash key~~ New shortcut.

Requires API v3.

rx.el.div(
    rx.el.p(
        rx.el.strong("v2.1"),
        " · released ",
        rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
    ),
    rx.el.p(
        "Search now opens with ",
        rx.el.kbd("Ctrl"),
        " + ",
        rx.el.kbd("K"),
        ". ",
        rx.el.s("Slash key"),
        " ",
        rx.el.mark("New shortcut"),
        ".",
    ),
    rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
    padding="12px 16px",
    border_left=f"4px solid {rx.color('indigo', 9)}",
    background=rx.color("gray", 2),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Workshop notes

Text elements give meaning to words within a sentence. Mix them with text inside rx.el.p.
strong/b and em/i look the same but mean different things. When it carries meaning, use strong or em.
code is code, kbd a key to press, samp program output.
The only element-specific attributes are value on data, date_time on time and cite on q. Everything else is common attributes and styles.
bdi and bdo handle text direction, ruby, rt and rp readings, and wbr a place where the line may break.

← Previous

HTML elements · HTML

HTML elements · HTML Layout

Get news about new lessons

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

Questions & answers

Ask anything about this lesson. Questions from every language version of this page appear together.

ReflexKR

Learn Python and Reflex by doing. Every example was run and verified on Reflex 0.10.0.

ReflexKR is free, with no banner ads. If it helped you, you can support it with a coffee. ☕ Buy us a coffee

Affiliate disclosure

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex