Skip to content
The stock for our react component library soup. - 100% veggie & gluten-free
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
docs
lib
public
src
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
package-lock.json
package.json
styleguide.config.js
webpack.config.js

README.md

MagicSoup.io - Stock

Build Status Open issues Code of Conduct Chat on Gitter MIT license Release Weekly downloads

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
You can’t perform that action at this time.