Resources for Developers

Table of Contents

About @mineral/core

The @mineral/core package is a React component library built upon Material UI. We are actively working on theming and extending Material UI components to look and feel like Mineral.


  • Themed components so far

    • Typography

    • Most colors

    • Avatar

    • Button

    • ButtonGroup

    • Card, and most of its subcomponents

    • FormControl

    • FormHelperText

    • FormLabel/InputLabel

    • IconButton

    • Input

    • Select

    • Table (basic styles only, for now)

    • Tabs

    • TextField

    • Tooltip

  • Component documentation

  • Source


Get Started Using @mineral/core

1. Configure your project to pull from the Artifactory registry

Please follow the instructions in the package's README.

2. Install the @mineral/core package and its dependencies

npm install @mineral/core @material-ui/core react react-dom

Or

yarn add @mineral/core @material-ui/core react react-dom

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


import React from 'react';
import { render } from 'react-dom';
import { Button, theme, ThemeProvider } from '@mineral/core';

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

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

4. Reference the Open Sans font

Mineral is designed around Open Sans. For components to look their best, use Open Sans in your project.

The simplest method of including the font in your app is to use the typeface-open-sans package.

Alternatively, 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.