{"id":2911,"library":"dash-core-components","title":"Dash Core Components","description":"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.","status":"active","version":"2.0.0","language":"en","source_language":"en","source_url":"https://github.com/plotly/dash","tags":["dash","plotly","ui","components","web-app","interactive","data visualization","frontend"],"install":[{"cmd":"pip install dash","lang":"bash","label":"Install Dash (includes Core Components)"}],"dependencies":[{"reason":"Dash Core Components are bundled with and imported directly from the `dash` library since version 2.0.0.","package":"dash","optional":false},{"reason":"Optional dependency for faster JSON serialization, improving callback performance in Dash 2.0+.","package":"orjson","optional":true}],"imports":[{"note":"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.","wrong":"import dash_core_components as dcc","symbol":"dcc","correct":"from dash import dcc"}],"quickstart":{"code":"from dash import Dash, html, dcc\n\napp = Dash(__name__)\n\napp.layout = html.Div([\n    html.H1(\"My Dash App with Core Components\"),\n    dcc.Dropdown(\n        ['New York City', 'Montréal', 'San Francisco'],\n        'Montréal',\n        id='city-dropdown'\n    ),\n    html.Div(id='output-container')\n])\n\n# Callbacks would typically be added here for interactivity\n\nif __name__ == '__main__':\n    app.run_server(debug=True)","lang":"python","description":"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)."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"dash-core-components < 2.0.0, dash < 2.0.0"},{"fix":"Upgrade your Python environment to Python 3.6 or newer. (Dash typically supports the latest Python 3 versions).","message":"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.","severity":"breaking","affected_versions":"dash-core-components < 2.0.0, dash < 2.0.0 (when migrating to 2.x)"},{"fix":"Explicitly use `Input(component_id=..., component_property=...)` and `State(component_id=..., component_property=...)` keyword arguments in your callback decorator.","message":"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.","severity":"gotcha","affected_versions":"dash >= 2.0.0"},{"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`).","message":"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`.","severity":"gotcha","affected_versions":"All versions"},{"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\"))`.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-11T00:00:00.000Z","next_check":"2026-07-10T00:00:00.000Z"}