🦉 Minerva UI

Documentation

Get started

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

Install

npm install --save minerva-ui or yarn add minerva-ui

Goals:

Highly Composable
Easy to customize

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 styles from Tailwind CSS.

const App = () => (
  <ThemeProvider>
    {/* optional but recommended */}
    <GlobalStyles />
  </ThemeProvider>
)

Then import components you want into your UI:

import { Checkbox } from 'minerva-ui';

And use them:

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

Utility Props

Utility props are provided as aliases for most components. The style is heavily influenced by Tailwind CSS.

For example:

() => (
  <>
    {/* enter a custom pixel value */}
    <Button fontSize="12px">Save</Button>
    {/* or enter the value named "sm" in the theme, which is .875rem by default */}
    <Button fontSize="lg">Save</Button>
  </>
)

Styling Props Example

Here's the "Card" example by Tailwind recreated using this API:

() => (
  <Flex
    flexDirection="column"
    boxShadow="lg"
    borderRadius="md"
    maxWidth="24rem"
    overflow="hidden"
  >
    <img
      src="https://tailwindcss.com/img/card-top.jpg"
      alt="Sunset in the mountains"
    />
    <Flex flexDirection="column" px={6} py={4}>
      <Text fontWeight="bold" fontSize="xl" mb={2} color="gray.700">The Coldest Sunset</Text>
      <Text color="gray.700" lineHeight="normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</Text>
    </Flex>
    <Flex px={6} py={4}>
      <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} mr={2}>
        #photography
      </Block>
      <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} mr={2}>
        #travel
      </Block>
      <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1}>
        #winter
      </Block>
    </Flex>
  </Flex>
)

Once you've settled on your styles, you can then easily extract components into your own custom components without sacrificing control:

// make sure to pass children and "forward" all props to your component
const Tag = ({ children, ...props }) => (
  <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} {...props}>
    {children}
  </Block>
)

render(
  <Flex>
    <Tag>High Priority</Tag>
    {/* by passing props down we can still style our custom component */}
    <Tag bg="indigo.600" color="#fff" ml={2}>Customized Tag</Tag>
  </Flex>
);

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

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 Jest Typescript TSDX

cratebind/minerva-ui