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

Code Block

rx.code_blockrx.code_block.themes

Official docs

Workshop order

On the installation guide page, put the 'install command' and the 'first app code' in syntax-highlighted code boxes, each with a copy button.

rx.code_block shows multi-line code with syntax highlighting for its language. Pass a string that keeps its line breaks and indentation as the first argument, and name the language with language. For short code inside a line of text, use rx.code. Every example in this course is displayed with rx.code_block too.

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

Try the props

Change the language and the same text is highlighted differently. Feel free to type a different line of code into the field below.

Try the props

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

language sets the highlighting rules. Turn on show_line_numbers to add line numbers on the left.

Prop	Values	Default	Use
First argument (`code`)	String	Required	The code to show
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	Highlighting rules
`theme`	`rx.code_block.themes.…`	`one_light` in light mode, `one_dark` in dark mode	Color scheme
`show_line_numbers`	`True` / `False`	`False`	Line numbers
`starting_line_number`	Integer	`1`	Number of the first line
`wrap_long_lines`	`True` / `False`	`False`	Wrap long lines
`can_copy`	`True` / `False`	`False`	Copy button in the top-right corner
`copy_button`	Component	None	Button to use instead of the default copy button
`custom_style`	dict	None	Style of the code box
`code_tag_props`	dict	None	Props passed to the inner `code` tag

Themes

theme takes a value from rx.code_block.themes. Strings like "dracula" are not accepted. Without it, one_light is used automatically in light mode and one_dark in dark mode.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

To choose the theme for each mode yourself, pass the light and dark values to rx.color_mode_cond.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

To choose a theme from a State string, map the string to a theme value with rx.match, since a plain string can't be passed. Beyond these there are about 40 more, including nord, vs_dark, ghcolors, night_owl and material_dark.

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

Line numbers and long lines

starting_line_number sets the number of the first line, so an excerpt of a long file can keep its original line numbers. wrap_long_lines=True wraps lines that overflow horizontally onto the next line.

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

Copy button and styling

can_copy=True adds a copy button in the top-right corner; clicking it puts the code on the clipboard. It isn't in the official docs' props table, but Reflex 0.10 has it. To change the button's look, pass your own button to copy_button.

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

Style props such as width and font_size, as well as custom_style, apply to the code box. Anything meant for the inner code tag goes through code_tag_props.

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

Filling the order

Show the install command as bash and the first app code as python with line numbers, and give both a copy button.

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

Workshop notes

Create a highlighted code box with rx.code_block("code", language="python").
theme is rx.code_block.themes.name. Strings don't work; to choose via State, use rx.match.
Handle lines with show_line_numbers · starting_line_number · wrap_long_lines.
can_copy=True adds a copy button (0.10, not in the docs table); copy_button swaps in your own button.

← Previous

Data display · Data List

Data display · Progress

Get news about new lessons

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