Hi Materials Project team & community 👋
We’d like to share MatsciUI — a modernized React component library built from a clean-slate refactor of mp-react-components, while intentionally keeping the original API style and UI patterns as consistent as possible.
Project goal
The main goal of this project is straightforward:
- keep the component APIs broadly familiar to existing users
- keep the UI appearance and interaction patterns close to the original library
- update the dependency stack, build system, typing, and docs/tooling for modern React applications
In other words, this is not a redesign of the MP component experience. It is an effort to preserve that experience on a more up-to-date technical foundation.
What stays consistent
We tried to keep the library recognizable at both the API and UI level, especially for the core scientific workflows that made mp-react-components valuable:
- Search UI patterns
- data-dense tables and filters
- periodic-table-based composition input
- publication-related components
- Crystal Toolkit-related 3D scene components
Across these areas, the intention is that developers should still see familiar component concepts, familiar usage patterns, and familiar visual behavior.
What has been modernized
While the public experience stays close to the original, the underlying package has been updated for the modern React ecosystem:
| Area |
mp-react-components |
MatsciUI |
| Typing |
older mixed patterns |
strict TypeScript |
| React compatibility |
legacy baseline |
React 17 / 18 / 19 peer support |
| Module format |
legacy entry setup |
ESM-first with explicit exports |
| Build tooling |
older toolchain |
Vite + Rollup 4 + SWC |
| Testing |
Jest-era setup |
Vitest + jsdom |
| Docs |
Storybook 6 |
Storybook 10 + Vite |
| UI internals |
older ecosystem pieces |
updated dependencies such as Radix UI and TanStack Table |
| Network layer |
historical request usage |
consolidated fetch-based utilities |
Design principle
A core principle throughout the refactor was:
keep the original component ergonomics and visual behavior wherever possible, while upgrading the internals to match current library expectations.
That means the emphasis has been on continuity in API and UI, rather than introducing unnecessary conceptual changes.
Why we’re sharing it
We wanted to share this downstream effort with the MP community in case it is useful to others who appreciate the original component model and want a version aligned with newer React and tooling conventions.
Feedback, issues, and discussion are all very welcome.
Many thanks to the Materials Project team for the original open-source foundation and the scientific UI patterns that inspired this work.
Hi Materials Project team & community 👋
We’d like to share MatsciUI — a modernized React component library built from a clean-slate refactor of
mp-react-components, while intentionally keeping the original API style and UI patterns as consistent as possible.Project goal
The main goal of this project is straightforward:
In other words, this is not a redesign of the MP component experience. It is an effort to preserve that experience on a more up-to-date technical foundation.
What stays consistent
We tried to keep the library recognizable at both the API and UI level, especially for the core scientific workflows that made
mp-react-componentsvaluable:Across these areas, the intention is that developers should still see familiar component concepts, familiar usage patterns, and familiar visual behavior.
What has been modernized
While the public experience stays close to the original, the underlying package has been updated for the modern React ecosystem:
mp-react-componentsMatsciUIexportsfetch-based utilitiesDesign principle
A core principle throughout the refactor was:
That means the emphasis has been on continuity in API and UI, rather than introducing unnecessary conceptual changes.
Why we’re sharing it
We wanted to share this downstream effort with the MP community in case it is useful to others who appreciate the original component model and want a version aligned with newer React and tooling conventions.
Feedback, issues, and discussion are all very welcome.
Many thanks to the Materials Project team for the original open-source foundation and the scientific UI patterns that inspired this work.