import { Meta, ArgsTable } from '@storybook/addon-docs';

<Meta title="Introduction/MP React Components" />

# MP React Components

The MP React Components library is a suite of JavaScript components designed for displaying and interacting with materials science data.
These components provide the building blocks for the interactive parts of the Materials Project website.

`npm install @materialsproject/mp-react-components`

The components in this library are designed to be ported to [plotly Dash](https://dash.plotly.com/). These documentation pages display code
in React, but usage in Dash is almost identical. Checkout the **Usage with Dash** page to understand how to translate React code to Dash code.
You can install the dash version of this library using pip.

`pip install dash-mp-components`

## Key Features

- Interactive crystal structures using threejs
- Input-linked periodic table for entering formulas and element lists
- Complete search interface for dynamically filtering data from a REST API
- A suite of components for fetching and rendering publications data in an easy and structured way

## Github

React Component Library: [mp-react-components](https://github.com/materialsproject/mp-react-components)

Dash Component Library: [dash-mp-components](https://github.com/materialsproject/dash-mp-components)

## Contributors

<a href="https://github.com/materialsproject/mp-react-components/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=materialsproject/mp-react-components" />
</a>