npm package: @magicsoup.io/stock
Description: The stock for our react component library soup. - 100% veggie & gluten-free
Author: zauberware
Latest version: 0.0.14



# MagicSoup.io - Stock

[![Build Status](https://travis-ci.com/magicsoup-io/magicsoup-stock.svg?branch=master)](https://travis-ci.com/magicsoup-io/magicsoup-stock)
[![Open issues](https://img.shields.io/github/issues-raw/magicsoup-io/magicsoup-stock.svg?style=flat)](https://github.com/magicsoup-io/magicsoup-stock/issues)
[![Code of Conduct](https://img.shields.io/badge/code-of%20conduct-green.svg)](https://github.com/magicsoup-io/magicsoup-stock/blob/master/CODE_OF_CONDUCT.md)
[![Chat on Gitter](https://img.shields.io/gitter/room/magicsoup-io/community.svg?colorB=753a88&style=flat)](https://gitter.im/magicsoup-io/community)
[![MIT license](https://img.shields.io/github/license/magicsoup-io/magicsoup-stock.svg?style=flat)](https://github.com/magicsoup-io/magicsoup-stock/blob/master/LICENSE)
[![Release](https://img.shields.io/github/release/magicsoup-io/magicsoup-stock.svg?style=flat)](https://github.com/magicsoup-io/magicsoup-stock/releases)
[![Weekly downloads](https://img.shields.io/npm/dw/@magicsoup.io/stock.svg?style=flat)](https://www.npmjs.com/package/@magicsoup.io/stock)

A leightweight component library for your next React.js project. The *soup* is getting cooked with [styled-components](https://github.com/styled-components/styled-components) and [styled-system](https://github.com/jxnblk/styled-system).

Inspired by [rebass](https://github.com/rebassjs/rebass) we at [zauberware](https://www.zauberware.com) created our own component starter library: **[MagicSoup.io](https://magicsoup.io)**!

A perfect fit for `create-react-app` and `gatsby` websites. Bundlesize only **2.11KB**!

**We love to code! We love to share! We love to create awesome UIs!**

Our goal is to write clean, flexile, maintainable and extendable frontend components. MagicSoup.io follows the principles of component based frontend design and implements the philosophy of `styled-components` and `styled-system`. For us it's one of the best starter libraries to create indivudal designed web interfaces.


## Principles

- Minimal
- Useful
- Unopinionated
- Flexible
- Consistent
- Extensible
- Themeable

## Features

- A starter library to create your own React component library
- Easy adoption, well known props because of [styled-system](https://github.com/jxnblk/styled-system) 
- Stateless UI components
- Theming is possible and easy
- Components are extensible
- Speeds up your frontend development

## Installation

`npm i @magicsoup.io/stock`

## Documentation

### Quick start
`import { Text } from '@magicsoup.io/stock'`

```
<Text
  fontSize={[ 3, 4, 5 ]}
  fontWeight='bold'
  color='primary'>
  This is a basic text element
</Text>
```

Read the [docs](https://docs.magicsoup.io/) !

## TBD
- Docs (Finish docs for base components)
- Logo (Creating a logo for MagicSoup.io)
- Badges (Adding travis CI, Code coverage etc.)
- Default props (give all components the right default props)
- Sandbox (LiveCode with X?)
- Examples (building higher order components)
- Boilerplates (create-react-app, gatsby)
- Authors, Contributors
- Extension packs:
  - magicsoup-io/greens
  - magicsoup-io/form
    - Checkbox
    - Radio
    - Input
    - Textarea
    - Switch
    - Label
  - magicsoup-io/marketing
    - ?
  - magicsoup-io/progress
  - magicsoup-io/menu
  - magicsoup-io/tabs
  - magicsoup-io/accordion
  - magicsoup-io/slider
  - magicsoup-io/truncate