Skip to content

Components

Components are the visual building blocks of a Vizro dashboard page. You add them to the components argument of a Page (or Container) to display charts and tables, present text, group related content into sections, or expose interactive elements such as buttons.

Vizro ships with Graph, Table, AgGrid, Figure, Card, Text, Button, Container, and Tabs components. You can also extend Vizro with your own components.

When to use which component

Use this table to pick the right component for a given piece of content. Every component below reacts to controls unless noted otherwise.

Component Choose it when you need to… Prefer instead…
Graph Render a Plotly Express chart or a custom Plotly figure. AgGrid/Table for tables; Figure for other reactive Dash components.
AgGrid Display an interactive tabular grid (recommended default for tables). Table if you specifically need a Dash DataTable; Graph for a chart.
Table Display a Dash DataTable. AgGrid is recommended for most tables.
Figure Wrap any other reactive Dash component (including built-in KPI cards). Graph, AgGrid/Table for the common cases; custom components if the component doesn't need to react to controls.
Card Show a bordered, attention-drawing Markdown callout or a clickable navigation tile. Text for plain Markdown; a KPI card figure for KPI tiles; Button to trigger an action.
Text Show plain Markdown text with no border or background. Card if you want it to stand out.
Button Let users trigger an action, submit a form, or navigate to a URL. Filter / Parameter for control-like behavior; Card's navigation tile for click-to-navigate.
Container Group components into a nested section with its own layout, styling, or scoped controls. Page.layout alone for simple arrangements; Tabs to switch between multiple containers.
Tabs Let users switch between multiple Containers that share the same space. A single Container if all content should be visible at once.