Small, simple set of React UI components

Based on Rebass these components can be used in React projects with styled components.

How it works

First, install the package:

``npm i midnight-shadow`

`
import React from 'react'
import { Flex, Box, Text } from 'midnight-shadow'

export default props =>

Hello


What it looks like

There are three UI components: Flex, Box, and Text

Which mostly work like the Rebass versions:
- Box
- Flex
- Text

| Prop name | CSS val |
| --------------- | --------------- |
| width | 'width' |
| height | 'height' |
| minHeight | 'min-height' |
| maxHeight | 'max-height' |
| minWidth | 'min-width' |
| maxWidth | 'max-width' |
| px | 'padding-left' |
| px | 'padding-right' |
| py | 'padding-top' |
| py | 'padding-bottom' |
| pt | 'padding-top' |
| pb | 'padding-bottom' |
| pl | 'padding-left' |
| pr | 'padding-right' |
| m | 'margin' |
| mx | 'margin-left' |
| mx | 'margin-right' |
| my | 'margin-top' |
| my | 'margin-bottom' |
| mt | 'margin-top' |
| mb | 'margin-bottom' |
| ml | 'margin-left' |
| mr | 'margin-right' |
| bg | 'background' |
| position | 'position' |
| borderRadius | 'border-radius' |
| textAlign | 'text-align' |
| textTransform | 'text-transform' |
| textDecoration | 'text-decoration' |
| flex | 'flex' |
| flexDirection | 'flex-direction' |
| flexWrap | 'flex-wrap' |
| justifyContent | 'justify-content' |
| alignItems | 'align-items' |
| alignContent | 'align-content' |
| fontFamily | 'font-family' |
| fontSize | 'font-size' |
| fontWeight | 'font-weight' |
| lineHeight | 'line-height' |
| letterSpacing | 'letter-spacing' |
| color | 'color' |
| sx | general styles |

$3

Each prop takes either a string or an array of strings. Arrays are used for breakpoints:

`
const breakpoints = {
sm: '576px',
md: '768px',
lg: '992px',
}
`

eg.,

`
...
`

$3

General styles can be added like below:

`
...
`

You can also pass an array of values for breakpoints into general styles like so:

`
...
`

$3

You can pass an as prop through each Ui component

`
...
`

`
...
`

`
...
``