Dash Components created by the world's largest open-source community for ML & data science web apps

With >2M Python, R, and Julia users, Dash is the most downloaded, trusted framework for building ML & data science web apps.

Plotly maintains a suite of Core, DAQ, Bio, and HTML components that can be easily downloaded and imported into any Python, R, or Julia Dash app. For advanced users, Dash also provides a framework that easily converts React.js components into Python classes that are compatible with the Dash ecosystem. The Dash community has utilized this compatibility by building incredible components, with utilities ranging from styling to data visualization to server-side caching.

Scroll down to see some Dash components that were recently shared by the Dash community and/or listed on PyPI. We're always adding to this list. So, if you come across a component that we've missed or if you want to share your own component, contact us!

Contact us

Styling & UI

Dash Bootstrap Components (DBC)

Dash Bootstrap is a library of Bootstrap components that makes it easier to build consistently styled apps with complex, responsive layouts.

pip install dash-bootstrap-components

Community post, Github

Author: Faculty AI; Tom Begley, @tcbegley; Pascal Bugnion, @pbugnion

Dash Bootstrap

Grid Generator

Grid Generator

Grid Generator is a component that makes use of CSS grid to simplify Dash layouts. It has a control panel that contains input components to easily modify the state of the grid.

pip install dash-ui

Community post, Github

Author: Ryan Marren, @rmarren1

Dash Trich Components

Dash Trich Components is a library that comes with four types of components: cards, carousels, sidebars, and a theme toggle. Cards come with pre-formatted space for an image, title, description, badges, and GitHub links. The carousel easily adds interactivity to HTML elements. The sidebar is collapsible and has icons from Font Awesome. Lastly, switch from dark to light theme with the theme toggle component.

pip install dash-trich-components

Community post, Github

Author: Natacha Romano, @romanonatacha

Dash Trich
Materials UI

Material UI

Material UI is a React component based on Material Design. Its Dash component equivalent includes autocomplete, bottom navigation, checkboxes, drawers, drop-down menus, and more.

pip install sd-material-ui

Community post, Github

Author: StratoDem Analytics

Data Visualization

Dash Pivottable

Dash Pivottable wraps the react-pivottable library, a pivot table library with drag'n'drop functionality. This Dash component lets you build interactive pivot tables purely in Python. The v0.0.2 release includes support for R and will soon be available in CRAN.

pip install dash-pivottable

Demo the component!

Community post, Github

Author: Xing Han Lu, @xhlulu

Dash Pivottable

Tabulator

Tabulator

Tabulator is based on Tabular, a JavaScript library. It features an easy-to-use, interactive table. With this component, you can group rows under a header, use a case-sensitive search, and include custom filters.

pip install dash_tabulator

Community post, Github

Author: Patrick O'Leary, @preftech

Dash Leaflet

Dash Leaflet is a map component that wraps React-Leaflet to enable the drawing of polygons, lines, and circles. It also comes with markers, tooltips, popups, tiles, and overlays to add more flexibility and interactivity to the Dash app map experience.

pip install dash-leaflet

Demo the component!

Community post, Github

Author: Emil Eriksen, @emilhe

Dash Leaflet

Visdcc

Visdcc

Vis.js is a library for visualizing dynamic and/or unstructured data. Transformed into a Dash component, you can use this library to plot a network in your Dash app and easily animate or move the view.

pip install visdcc

Community post, Github

Author: Jimmy Wu, @jimmybow

Additional Functionality

Bidirectional Component Synchronization

With this capability, 2 components (editable and with the same input) can now be synchronized bidirectionally without using callbacks. For example, if you move a slider, the text input field will update and vice versa.

import dash
import dash_core_components as dcc
from dash_extensions import Sync

Community post

Author: Emil Eriksen, @emilhe

Slider
Dash Ace

Dash-Ace

Dash-Ace wraps React-Ace, a component for embedding a code editor into your website or web app. The Dash component supports Python, SQL, Text, Norm and several themes. Syntax highlighting, code folding and auto-completion are also available in custom language support.

pip install dash-ace

Demo React-Ace!

Community post, Github

Author: Xu Miao, @xumiao

Download Component

The Download Component simplifies the download process for in-memory data. Take advantage of the built-in file and data frame utilities. This versatile component can be added anywhere in the layout and targets the data property of a callback.

pip install dash-extensions==0.0.18
from dash_extensions import Download

Community post, Github

Author: Emil Eriksen, @emilhe

Download

Upload

Dash Resumable Upload

Dash Resumable Upload is a component to upload large files. Wrapping resumable.js, it gives you the ability to customize max file settings, extensions, pause uploads, and upload files simultaneously. It is an alternative to dcc.Upload, which stores uploaded data within the component.

pip install dash-resumable-upload

Community post, Github

Author: Ryan Marren, @rmarren1

Video Engine

Video Engine is a React component integrated into Dash for synchronized real-time playback of CSV data and video.

import video_engine as rpd

Community post, Github

Author: @SkyRatInd

Video Engine

pyLDAvis

pyLDAvis

pyLDAvis is designed to help users interpret the topics in an LDA model fitted to a corpus of text data. To use this component, save your data as a .html file and extract the var section.

git clone https://github.com/antisrdy/pyldavis_dash.git
cd pyldavis_dash
pip install .

Community post, Github

Author: Antoine, @antisrdy

CallbackCache

CallbackCache simplifies the syntax of server-side caching. Enable the component by registering callbacks on the object instead of on the Dash app. Then, Callback Cache takes care of serialization, so you do not need to convert from/to JSON in every callback. Also, since the data is server-side, there is no data transfer, so the maximum storage reflects the server hardware, instead of the browser.

pip install dash-extensions==0.0.23 
from dash_extensions.callback import CallbackCache

Community post, Github

Author: Emil Eriksen, @emilhe

Callback Cache

Therapeutics & Drug Development

Dash NGL MoleculeViewer

Dash NGL MoleculeViewer

The NGL MoleculeViewer creates a 3D visualization of biomolecules such as DNA/RNA and proteins. Structures, chains, and atoms within the molecules can be highlighted and styled in multiple representations, and the component allows the ability to meaningfully view molecule structures side-by-side with interactive user controls.

Github

Authors: @IvoLeist

Dash IGV

Dash IGV brings the Interactive Genome Viewer tool created by the Broad Institute to the Dash-Bio suite of components. It enables real-time visualization of large-scale genomic data as tracks which can be explored with interactive controls at multiple scales of detail. The tool also offers the ability to overlay feature highlights on top of sequenced data such as annotations, methylation patterns, variants and mutations.

Github

Authors: Stephen Day, @shday

Dash IGV

See Dash in action

Sign up for our next Dash Live Weekly demo session to learn more about our Dash Enterprise offering, including industry applications and all the latest tips and features on how to operationalize your data science models.

Please fill all *required* fields