Dash MP Components

0.5.1 verified Fri May 01 auth: no python

Dash components for the Materials Project, providing interactive UI elements to access and visualize materials data. Current version is 0.5.1, with releases triggered by Git tags via CI/CD. The library wraps common Materials Project API features into Dash components.

pip install dash-mp-components

Common errors

error ImportError: cannot import name 'MPElementCard' from 'dash_mp_components' ↓

cause Using an outdated version or incorrect import path; the component might not exist in older releases.

fix

Upgrade to the latest version: pip install --upgrade dash-mp-components and use correct import: from dash_mp_components import MPElementCard

error dash.exceptions.NoLayoutException: Layout must be a Dash component or a function that returns a Dash component ↓

cause Trying to use a component without wrapping it in a Dash layout container (e.g., html.Div).

fix

Ensure the component is part of a layout like: app.layout = html.Div([MPElementCard(...)])

error TypeError: __init__() got an unexpected keyword argument 'some_prop' ↓

cause Prop name misspelled or not available; props are case-sensitive and must match the component's documentation.

fix

Check the component's available props in the official documentation or source code; correct spelling and case.

Warnings

breaking Version 0.5.0+ changed the import path from 'dash_mp_components' to a different package structure; ensure you use the correct top-level import as shown in the docs. ↓

fix Use 'from dash_mp_components import ComponentName' rather than any nested submodule imports.

gotcha Components require a Materials Project API key (MP_API_KEY environment variable or 'api_key' prop). Without it, components will fail silently or show an error state. ↓

fix Set the MP_API_KEY environment variable or pass api_key as a prop to each component.

deprecated The 'api_key' prop is deprecated in favor of using the global key via the environment variable. Future versions may remove the prop entirely. ↓

fix Set the MP_API_KEY environment variable instead of passing api_key as a prop.

gotcha Components are not reactive to prop changes after initialization; you must recreate the component to update data. ↓

fix Use Dash callbacks to rebuild the component layout when data dependencies change.

Imports

MPElementCard
wrong
```
from dash_mp_components.mpelementcard import MPElementCard
```
correct
```
from dash_mp_components import MPElementCard
```
Wrong because the top-level module exposes components directly; submodule import may fail or be unsupported.
MPMaterialsExplorer
wrong
```
import dash_mp_components.MPMaterialsExplorer
```
correct
```
from dash_mp_components import MPMaterialsExplorer
```
Wrong because Dash components are classes, not modules; they must be imported as named imports from the package.

Quickstart

Minimal Dash app with an MPElementCard showing silicon data. Requires a valid Materials Project API key.

import dash
from dash import html
from dash_mp_components import MPElementCard

app = dash.Dash(__name__)
app.layout = html.Div([
    MPElementCard(element='Si', api_key=os.environ.get('MP_API_KEY', 'your-key-here'))
])

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