Try the New Bootstrap Theme in Your Dash Apps Today! 
Vizro Bootstrap Theme
In addition to the 26 themes available in the dash-bootstrap-components library, you can now style your Dash app with a Vizro theme as well!
Here’s a quick example of a Vizro theme, and you can explore more in the Vizro examples gallery.
What is Vizro?
Vizro is an open-source dashboarding framework developed by McKinsey. Built with Plotly and Dash, Vizro provides a high-level API for creating interactive, production-ready dashboards with minimal code. It includes pre-configured layouts, themes, and components, making it easier to build data-driven applications.
Even if you’re not creating a Vizro app, you can still use its styling and design system in your Dash applications.
Vizro Features Available for Dash Apps
Refer to the Vizro documentation for more details, but here are some key highlights:
-
Vizro Bootstrap-themed figure templates are available in the dash-bootstrap-templates library starting from version 2.1.0. Both dark and light-themed templates are included.
-
Vizro Bootstrap theme provides styling for Bootstrap components, allowing them to match the Vizro light or dark theme.
-
Vizro theme for other Dash components extends styling beyond Bootstrap. Vizro includes custom CSS to theme additional Dash components that are not part of Bootstrap. You can explore all the custom CSS files in their GitHub repository.
-
Vizro KPI cards like the ones shown in the image above can be added to a regular Dash app, bringing a visually consistent way to display key performance indicators. See more details and examples in this Forum post
How To Use Vizro Bootstrap Theme In Your Dash App
You can add the Vizro Bootstrap theme to your app like this:
pip install vizro>=0.1.34
import vizro
from dash import Dash
app = Dash(__name__, external_stylesheets=[vizro.bootstrap])
You can also use the Vizro Bootstrap theme without importing vizro in your app.
vizro_bootstrap = "https://cdn.jsdelivr.net/gh/mckinsey/vizro@main/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css?v=2"
app = Dash(__name__, external_stylesheets=[vizro_bootstrap])
How To Use Vizro Themed Figure Templates In Your Dash APP
Make Vizro templates available in your app:
import vizro
This will import the Vizro figure templates and set the “vizro_light” as the default theme. To change it to the “vizro_dark” theme:
fig=px.scatter(gapminder, x="gdpPercap", y="lifeExp", size="pop", size_max=60, color="continent", template="vizro_dark")
Also available in dash-bootstrap-templates>=2.1.0
Example: Vizro light dark color mode
See the code for these apps and more on the Dash Bootstrap Theme Explorer:
Big thank you to the Vizro team for creating this fantastic Bootstrap theme and sharing it with the Dash community!
