Dash Core Components

2.0.0 · active · verified Sat Apr 11

Dash Core Components (dcc) is a suite of interactive user interface components for building analytical web applications with Dash. It provides essential UI elements like dropdowns, sliders, graphs, and input fields. As of version 2.0.0, it is integrated directly into the main `dash` library, simplifying imports. Maintained by Plotly, its release cadence is tied to that of the overarching Dash framework, seeing significant updates with major Dash versions.

Warnings

breaking Dash 2.0.0 introduced a breaking change to import statements. Previously, `dash_core_components` was imported as a separate package. Now, `dcc` is imported directly from the `dash` namespace.
Fix: Update your import statements from `import dash_core_components as dcc` to `from dash import dcc`. Ensure your `dash` package is version 2.0.0 or higher.
breaking Dash 2.0.0 (and thus dash-core-components 2.0.0) officially dropped support for Python 2. Applications using older Python versions will fail.
Fix: Upgrade your Python environment to Python 3.6 or newer. (Dash typically supports the latest Python 3 versions).
gotcha When defining callbacks in Dash 2.0.0+, if you are using `State` arguments in your `@app.callback` decorator, any `Input` arguments must now explicitly be named with `input=` (e.g., `Input(component_id='my-input', component_property='value')`). Previously, implicit naming was sometimes tolerated.
Fix: Explicitly use `Input(component_id=..., component_property=...)` and `State(component_id=..., component_property=...)` keyword arguments in your callback decorator.
gotcha Dash Core Components provide functionality but minimal default styling. For aesthetically pleasing and consistent layouts, it's highly recommended to use external CSS stylesheets or integrate with a component library like `dash-bootstrap-components`.
Fix: Apply custom CSS through the `assets` folder or utilize community-maintained styling libraries like `dash-bootstrap-components` (e.g., `pip install dash-bootstrap-components`).
gotcha Callbacks that perform long-running operations can cause the UI to appear frozen. Use `dcc.Loading` to wrap components that are targets of such callbacks to provide visual feedback to the user.
Fix: Wrap your output components (or sections of your layout) with `dcc.Loading` to display a spinner while callbacks are executing. Example: `dcc.Loading(id="loading-output-1", children=html.Div(id="output-1"))`.

Install

pip install dash Install Dash (includes Core Components)

Imports

dcc
```
from dash import dcc
```
Since Dash 2.0.0, core components are imported directly from the `dash` package. The `dash_core_components` package is now obsolete as a top-level import.

Quickstart

A minimal Dash application demonstrating the layout with a `dcc.Dropdown` component. This example initializes a Dash app, defines a simple layout containing a heading, a dropdown menu from `dcc`, and an empty div to display output (which would typically be updated by a callback).

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div([
    html.H1("My Dash App with Core Components"),
    dcc.Dropdown(
        ['New York City', 'Montréal', 'San Francisco'],
        'Montréal',
        id='city-dropdown'
    ),
    html.Div(id='output-container')
])

# Callbacks would typically be added here for interactivity

if __name__ == '__main__':
    app.run_server(debug=True)

view raw JSON →