Getting Started

Minerva UI is a reusable component library to help build UIs faster. This library aims to be highly composable, easy to use and accessible.

Install

yarn add minerva-ui

npm install --save minerva-ui

Usage

First add the <ThemeProvider /> and <GlobalStyles /> to the root of your app:

<GlobalStyles /> is optional but highly recommended. It includes the CSS reset and base styles from Tailwind CSS.

import { ThemeProvider, GlobalStyles } from 'minerva-ui';
const App = () => (
  <ThemeProvider>
    {/* optional but recommended */}
    <GlobalStyles />
  </ThemeProvider>
);

Then import components you want to use

import { Checkbox } from 'minerva-ui';

And use them:

Stay Logged In
() => {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
      Stay Logged In
    </Checkbox>
  );
};
() => {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
      Stay Logged In
    </Checkbox>
  );
};

Optional: Add Icons

By default, Minerva UI includes minimal icons to keep bundle size low.

To add your own icons, you can add them to your theme:

yarn add phosphor-react # you can use most react icon libraries here

import { ThemeProvider, defaultTheme, Icon } from 'minerva-ui';
import { Warning } from 'phosphor-react';
const customTheme = {
  ...defaultTheme,
  icons: {
    // declare the key and component in your theme, then you can use the key as name in the <Icon /> component
    warning: Warning,
  }
}
const App = () => (
  <ThemeProvider>
    <Icon name="warning" /> Warning!
  </ThemeProvider>
);

Contributing

Local Development

Clone Repo
Run yarn install
Run yarn lerna bootstrap to link dependencies

If you want to run the documentation locally:

Follow the steps above
Run yarn start in the root directory
Go to the docs directory and run yarn start

About

Influences

Ryan Florence "Reach UI" Guidelines - Great guidelines for making composable / declarative React APIs

Tailwind CSS - Utility-based CSS framework without pre-packaged styles

Chakra UI - Batteries-included React Component library