> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). For a Markdown version, remove the trailing slash from the page URL and append `.md`. The docs home is available at [index.md](http://localhost:3000/docs/index.md). # Component Library Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page contains a list of all builtin components. ## Data Display [Data Display](https://reflex.dev/docs/library/data-display/) - [Avatar](https://reflex.dev/docs/library/data-display/avatar/) - [Badge](https://reflex.dev/docs/library/data-display/badge/) - [Callout](https://reflex.dev/docs/library/data-display/callout/) - [Code Block](https://reflex.dev/docs/library/data-display/code-block/) - [Data List](https://reflex.dev/docs/library/data-display/data-list/) - [Icon](https://reflex.dev/docs/library/data-display/icon/) - [List](https://reflex.dev/docs/library/data-display/list/) - [Moment](https://reflex.dev/docs/library/data-display/moment/) - [Progress](https://reflex.dev/docs/library/data-display/progress/) - [Scroll Area](https://reflex.dev/docs/library/data-display/scroll-area/) - [Spinner](https://reflex.dev/docs/library/data-display/spinner/) ## Disclosure [Disclosure](https://reflex.dev/docs/library/disclosure/) - [Accordion](https://reflex.dev/docs/library/disclosure/accordion/) - [Segmented Control](https://reflex.dev/docs/library/disclosure/segmented-control/) - [Tabs](https://reflex.dev/docs/library/disclosure/tabs/) ## Dynamic Rendering [Dynamic Rendering](https://reflex.dev/docs/library/dynamic-rendering/) - [Auto Scroll](https://reflex.dev/docs/library/dynamic-rendering/auto-scroll/) - [Cond](https://reflex.dev/docs/library/dynamic-rendering/cond/) - [Foreach](https://reflex.dev/docs/library/dynamic-rendering/foreach/) - [Match](https://reflex.dev/docs/library/dynamic-rendering/match/) ## Forms [Forms](https://reflex.dev/docs/library/forms/) - [Button](https://reflex.dev/docs/library/forms/button/) - [Checkbox](https://reflex.dev/docs/library/forms/checkbox/) - [Form](https://reflex.dev/docs/library/forms/form/) - [Input](https://reflex.dev/docs/library/forms/input/) - [Radio Group](https://reflex.dev/docs/library/forms/radio-group/) - [Select](https://reflex.dev/docs/library/forms/select/) - [Slider](https://reflex.dev/docs/library/forms/slider/) - [Switch](https://reflex.dev/docs/library/forms/switch/) - [Text Area](https://reflex.dev/docs/library/forms/text-area/) - [Upload](https://reflex.dev/docs/library/forms/upload/) ## HTML [HTML](https://reflex.dev/docs/library/html/) - [HTML](https://reflex.dev/docs/library/html/html/) - [Text](https://reflex.dev/docs/library/html/text/) - [Layout](https://reflex.dev/docs/library/html/layout/) - [Forms](https://reflex.dev/docs/library/html/forms/) - [Media](https://reflex.dev/docs/library/html/media/) - [Tables](https://reflex.dev/docs/library/html/tables/) - [SVG](https://reflex.dev/docs/library/html/svg/) ## Layout [Layout](https://reflex.dev/docs/library/layout/) - [Aspect Ratio](https://reflex.dev/docs/library/layout/aspect-ratio/) - [Box](https://reflex.dev/docs/library/layout/box/) - [Card](https://reflex.dev/docs/library/layout/card/) - [Center](https://reflex.dev/docs/library/layout/center/) - [Container](https://reflex.dev/docs/library/layout/container/) - [Flex](https://reflex.dev/docs/library/layout/flex/) - [Fragment](https://reflex.dev/docs/library/layout/fragment/) - [Grid](https://reflex.dev/docs/library/layout/grid/) - [Inset](https://reflex.dev/docs/library/layout/inset/) - [Section](https://reflex.dev/docs/library/layout/section/) - [Separator](https://reflex.dev/docs/library/layout/separator/) - [Spacer](https://reflex.dev/docs/library/layout/spacer/) - [Stack](https://reflex.dev/docs/library/layout/stack/) ## Media [Media](https://reflex.dev/docs/library/media/) - [Audio](https://reflex.dev/docs/library/media/audio/) - [Image](https://reflex.dev/docs/library/media/image/) - [Video](https://reflex.dev/docs/library/media/video/) ## Other [Other](https://reflex.dev/docs/library/other/) - [Clipboard](https://reflex.dev/docs/library/other/clipboard/) - [Html Embed](https://reflex.dev/docs/library/other/html-embed/) - [Memo](https://reflex.dev/docs/library/other/memo/) - [Script](https://reflex.dev/docs/library/other/script/) - [Skeleton](https://reflex.dev/docs/library/other/skeleton/) - [Theme](https://reflex.dev/docs/library/other/theme/) ## Overlay [Overlay](https://reflex.dev/docs/library/overlay/) - [Alert Dialog](https://reflex.dev/docs/library/overlay/alert-dialog/) - [Context Menu](https://reflex.dev/docs/library/overlay/context-menu/) - [Dialog](https://reflex.dev/docs/library/overlay/dialog/) - [Drawer](https://reflex.dev/docs/library/overlay/drawer/) - [Dropdown Menu](https://reflex.dev/docs/library/overlay/dropdown-menu/) - [Hover Card](https://reflex.dev/docs/library/overlay/hover-card/) - [Popover](https://reflex.dev/docs/library/overlay/popover/) - [Toast](https://reflex.dev/docs/library/overlay/toast/) - [Tooltip](https://reflex.dev/docs/library/overlay/tooltip/) ## Tables And Data Grids [Tables And Data Grids](https://reflex.dev/docs/library/tables-and-data-grids/) - [Data Editor](https://reflex.dev/docs/library/tables-and-data-grids/data-editor/) - [Data Table](https://reflex.dev/docs/library/tables-and-data-grids/data-table/) - [Table](https://reflex.dev/docs/library/tables-and-data-grids/table/) ## Typography [Typography](https://reflex.dev/docs/library/typography/) - [Blockquote](https://reflex.dev/docs/library/typography/blockquote/) - [Code](https://reflex.dev/docs/library/typography/code/) - [Em](https://reflex.dev/docs/library/typography/em/) - [Heading](https://reflex.dev/docs/library/typography/heading/) - [Kbd](https://reflex.dev/docs/library/typography/kbd/) - [Link](https://reflex.dev/docs/library/typography/link/) - [Markdown](https://reflex.dev/docs/library/typography/markdown/) - [Quote](https://reflex.dev/docs/library/typography/quote/) - [Strong](https://reflex.dev/docs/library/typography/strong/) - [Text](https://reflex.dev/docs/library/typography/text/) ## Graphing Components Discover our range of components for building interactive charts and data visualizations. Create clear, informative, and visually engaging representations of your data with ease. ## Charts [Charts](https://reflex.dev/docs/library/graphing/charts/) - [Areachart](https://reflex.dev/docs/library/graphing/charts/areachart/) - [Barchart](https://reflex.dev/docs/library/graphing/charts/barchart/) - [Composedchart](https://reflex.dev/docs/library/graphing/charts/composedchart/) - [Errorbar](https://reflex.dev/docs/library/graphing/charts/errorbar/) - [Funnelchart](https://reflex.dev/docs/library/graphing/charts/funnelchart/) - [Linechart](https://reflex.dev/docs/library/graphing/charts/linechart/) - [Piechart](https://reflex.dev/docs/library/graphing/charts/piechart/) - [Radarchart](https://reflex.dev/docs/library/graphing/charts/radarchart/) - [Radialbarchart](https://reflex.dev/docs/library/graphing/charts/radialbarchart/) - [Sankeychart](https://reflex.dev/docs/library/graphing/charts/sankeychart/) - [Scatterchart](https://reflex.dev/docs/library/graphing/charts/scatterchart/) - [Treemap](https://reflex.dev/docs/library/graphing/charts/treemap/) ## General [General](https://reflex.dev/docs/library/graphing/general/) - [Axis](https://reflex.dev/docs/library/graphing/general/axis/) - [Brush](https://reflex.dev/docs/library/graphing/general/brush/) - [Cartesiangrid](https://reflex.dev/docs/library/graphing/general/cartesiangrid/) - [Label](https://reflex.dev/docs/library/graphing/general/label/) - [Legend](https://reflex.dev/docs/library/graphing/general/legend/) - [Reference](https://reflex.dev/docs/library/graphing/general/reference/) - [Tooltip](https://reflex.dev/docs/library/graphing/general/tooltip/) ## Other Charts [Other Charts](https://reflex.dev/docs/library/graphing/other-charts/) - [Plotly](https://reflex.dev/docs/library/graphing/other-charts/plotly/) - [Pyplot](https://reflex.dev/docs/library/graphing/other-charts/pyplot/) Connect your components to data and events with the [state guides](https://reflex.dev/docs/library/state/) .