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:

info

<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:

Preview

Stay Logged In

Source

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

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

Learn More

• Concepts

• Theming

• Utility Props

Contributing

Local Development

1. Clone Repo
2. Run yarn install
3. Run yarn lerna bootstrap to link dependencies

If you want to run the documentation locally:

1. Follow the steps above
2. Run yarn start in the root directory
3. Go to the docs directory and run yarn start

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

Tools

• Styled Components
• Styled System
• Reach UI
• Jest
• Typescript
• TSDX