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
·
Em
·
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
All 100 components in the official Reflex library, one page each. A hands-on field guide: change the props and watch the screen and the Python code change together.
The official Reflex library has 100 components, from buttons to charts, data tables and dialogs. This course is a field guide that covers those 100 one page at a time.
From today you are an apprentice at the Component Workshop. Orders for screen parts come into the workshop, and every page has one order pinned to it. Once you have learned the component, you can build the part on the order yourself.
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx. names the page covers, plus a link to the official docs.Workshop order
For example: 'A prominent Buy button and a less important Cancel button for the checkout screen.' Every page comes with one order like this.
| Shelf | Count | What's on it |
|---|---|---|
| Layout | 13 | Box, Flex, Stack, Grid, Container, Card … the skeleton of the screen |
| Typography | 10 | Text, Heading, Link, Code, Markdown … text |
| Forms | 10 | Button, Input, Checkbox, Select, Slider, Form, Upload … taking input |
| Data display | 11 | Badge, Avatar, Icon, Callout, Progress … showing information |
| Disclosure | 3 | Tabs, Accordion, Segmented Control |
| Overlay | 9 | Tooltip, Popover, Dialog, Drawer, Dropdown Menu, Toast … things that float on top |
| Dynamic rendering | 4 | Cond, Match, Foreach, Auto Scroll: different screens depending on State |
| Media | 3 | Image, Audio, Video |
| Tables and data grids | 3 | Table, Data Table, Data Editor |
| Charts | 12 | Area, Bar, Line, Pie, Radar, Scatter, Sankey … (Recharts) |
| Chart parts | 7 | Axis, Grid, Tooltip, Legend, Label, Reference, Brush |
| Other chart libraries | 2 | Plotly, Pyplot |
| HTML elements | 7 | Plain HTML tags used through rx.el |
| Other tools | 6 | Theme, Skeleton, Clipboard, Html Embed, Script, Memo |
You don't have to read in order. Jump straight to the component you need from the list on the left. If you are new, start with Layout and Forms.
Workshop notes
One page = one component. The live screen on top, its code underneath.
Change a value in Try the props and the code changes with it. Copy any combination you like as is.
Examples that need State show the State class too.
Get news about new lessons
We'll email you when this course gets new lessons or a follow-up course opens.
R
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© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Questions & answers
Ask anything about this lesson. Questions from every language version of this page appear together.