Mkplace Boina™

A library UI made as an excuse to test the workflow of building a packaged UI kit with styled-system, emotion, framer-motion and TypeScript. Also made to try out Storybook v6 with Chromatic. Not made to be as huge (and great) as Chakra-UI (which is a great inspiration), but may be used to do some livestream... And to put KLEE EVERYWHERE

View the storybook - View the chromatic page

Install

WARNING Early early version available, not made to be usable for now (and will maybe never be), but yeah

# using yarn
$ yarn add boina

# using npm
$ npm i boina

Usage

The package uses styled-system underneath, so all the UI component extends the base Box component and so you can use all of the styled system props and responsive styles!

You can see all the theme values (typography, colors, spacing etc) in the theme file. The color palette used is from Tailwind 2.0, which is a great color palette!

import { BoinaProvider, Flex, Button, Icon, Box } from 'boina'
import { FiAirplay } from 'react-icons/fi'

const App = () => {
  return (
    <BoinaProvider>
      <Flex spacing={4} direction={['column', 'row']} bg="amber.300">
        <Button>Hello world</Button>
        <Button variant="danger">Hello world</Button>
        <Icon as={FiAirplay} />
        <Box color="cyan.500" p={4}>
          <Text _hover={{ bg: 'amber.500', cursor: 'pointer' }}>
            Ehe te nandayo
          </Text>
        </Box>
      </Flex>
    </BoinaProvider>
  )
}