Mineral

The Themes are Always Changing, but the Tokens Stay the Same

Build Modern Products Faster

Mineral UI is an open-source design system created to simplify building appealing, modern software experiences. It is the culmination of designers and developers working together to give teams the ability to ship high-quality products faster.

Get StartedView on GitHub

Simplicity, Quality, Speed — Pick Three

People expect modern, engaging experiences that work. Mineral makes this easier by providing common patterns, reusable components and design guidelines that are visually appealing, consistent and easy to use.

By using individually consumable React components, teams can build, launch, and maintain high quality experiences with greater speed and efficiency.

Discover how our guidelines can help your next project

Switch It Up With Themes

It’s easy to match Mineral components to a product experience with themes. With just a few lines of code, change the theme for every component or constrain the change to only affect a portion of them. Themes are simple enough to quickly change the color palette and powerful enough to adjust a whole host of other properties.

Learn About Themes

Accessibility Built-in

Mineral has been designed and built to be accessible to all from the very beginning. The components do the hard work for you, through the consistent application of color contrast ratios, standards compliant markup, and thoughtful design, informed by researching best practices and testing with assistive technologies.

Drop-in Ready

Mineral components are fully encapsulated, designed for composability, and ready to be dropped in your React project. Each will appear and behave correctly without requiring additional styles nor adversely affecting styles already written. They do what you need them to, and nothing else.

Mineral

Let’s Get Started

  1. Install the Mineral UI package and its dependencies using npm or yarn

     npm i mineral-ui emotion-theming @emotion/core @emotion/is-prop-valid @emotion/styled react react-dom

  2. Wrap your app in a ThemeProvider at its root for styling

     import React from 'react';
 import { render } from 'react-dom';
 import Button from 'mineral-ui/Button';
 import { ThemeProvider } from 'mineral-ui/themes';

 function App() {
   return (
     <ThemeProvider>
       <Button>
         Hello World
       </Button>
     </ThemeProvider>
   );
 }

 render(<App />, document.getElementById('app'));

  3. Mineral is open-source. Contribute!

Read the full documentationView on GitHub