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

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

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

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

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

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

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

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

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

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

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

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