Getting Started

Mineral UI helps you quickly build React apps with high-quality, accessible components. Use npm or yarn to get components and themes that have been tested across modern browsers.

Below are a few simple steps to apply consistent styling and hierarchy to your app, so you can focus on solving business problems. Mineral UI is an open source project and welcomes all contributions.

Installation #

Install the Mineral UI package:

npm install --save mineral-ui

or

yarn add mineral-ui

Then install any missing peer dependencies reported by npm or yarn.

Usage #

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

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

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

Open Sans Font #

Mineral UI was designed around Open Sans. To get the components to look their best, you will need to include this font in your project yourself or our styles will fall back to system fonts. To quickly include this font in your app, copy this code into the `head` of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

For more options loading this font from Google, check out the "Family Selected" popup in the specimen. You can also download the font file and serve it yourself if you’d like, but we’ll leave that to you.

Styling #

This project uses Glamorous for its styling. Please see our documentation for details.

Theming #

Theming is a core concept in Mineral UI. Refer to the documentation for details.

Contributing #

We welcome all contributors who abide by our Code of Conduct. Please see the Contributors Guide and Developer Docs for more details on submitting a PR, setting up a local dev environment, running tests, etc...

Browser Support #

Mineral UI supports the latest versions of

• Chrome
• Firefox
• Safari
• Edge
• Internet Explorer 11