MagicSoup.io - Stock

A leightweight component library for your next React.js project. The soup is getting cooked with styled-components and styled-system.

Inspired by rebass we at zauberware created our own component starter library: 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
• 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 !

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