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

Typography

Code

rx.code

Official docs

Workshop order

In the installation instructions, set the commands and file names apart in a monospace font.

rx.code shows short code, commands and file names inside a sentence in a monospace font on a faint background. It renders an HTML <code> tag. For multi-line code with syntax highlighting, use rx.code_block.

console.log()

rx.code("console.log()")

Try the props

variant changes the background and border, size and weight the text, color_scheme the color.

Try the props

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost drops the background and only changes the font and color. high_contrast makes the text darker.

Prop	Values	Default	Use
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	Background and border style
`size`	`"1"` ~ `"9"`	inherited	Font size
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	inherited	Font weight
`color_scheme`	Radix color name	theme color	Color
`high_contrast`	`True` / `False`	`False`	Darker text

The variant type in Reflex 0.10 also lists "classic" and "surface", but Radix's Code only defines styles for the four above. The only events are the standard ones.

Four variants and contrast

The left column is the default, the right column is high_contrast=True. In running text soft is the safest choice; use solid when it must stand out and ghost when you want no background.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

Size and weight

size runs from "1" to "9", and the larger it is, the tighter the relative line height and letter spacing. Inside a sentence, leave size out and it follows the size of the surrounding text.

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

Color

color_scheme uses another color instead of the theme's. Match it to the meaning: red for code in an error message, gray for a neutral file name.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

Inside a sentence

Mix strings and rx.code as children of rx.text and the code sits in the middle of the sentence. Its size follows the size of the outer rx.text.

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

Filling the order

Commands use the default soft, the file name a gray outline. The notice box is an rx.callout.

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

Workshop notes

rx.code("…") is short code inside a sentence. For multiple lines and syntax highlighting, rx.code_block.
variant: solid · soft (default) · outline · ghost. high_contrast makes it darker.
Without size it follows the size of the surrounding rx.text.
Match color_scheme to the meaning (red for errors, gray for neutral).

← Previous

Typography · Link

Typography · Markdown

Get news about new lessons

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