MagicSoup.io - Instant

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

Inspired by rebass-native we at zauberware created our own component starter library: MagicSoup.io!

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

Our goal is to write clean, flexile, maintainable and extendable 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 individual designed mobile interfaces.

Principles

• Minimal
• Useful
• Unopinionated
• Flexible
• Consistent
• Extensible
• Themeable

Features

• A starter library to create your own React-Native 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/instant

Documentation

Quick start

import { TextInput } from '@magicsoup.io/instant'

<TextInput
  fontSize={[ 3, 4, 5 ]}
  fontWeight='bold'
  color='primary' />

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