@monstera/ui-components v1.3.1

Monstera

A React UI Components library built with Lerna and deployed with shipjs

About

A simple UI components library for React, created with Lerna and showcased with React Storybook

Find live documentation here.

Installation guide

All Monstera packages are available on npm

yarn add @monstera/ui-components
# or
npm install @monstera/ui-components

Button

Buttons can be used for actions in a app, from submitting forms to menus or applying filters

Usage

Basic

import React from "react";
import {Button} from "@monstera/ui-components";

const MyApp = () => (
    <div>
        <Button size="medium">Login</Button>
        <Button type="secondary" size="medium">Signup</Button>
    </div>
)

Button with icon

import React from "react";
import { Edit } from 'react-feather'
import {Button} from "@monstera/ui-components";

const EditIcon = () => <Edit strokeWidth={2} size={18}/>

const MyApp = () => (
    <Button label="Edit profile" Icon={EditIcon} />
)

Props

Text

The Text component is used for rendering copy in the app

Usage

import React from "react";
import {Text} from "@monstera/ui-components";

const MyApp = () => (
    <div>
        <Text type="hero">Welcome, John</Text>
        <Text type="h2">Lorem ipsum dolor sit amet.</Text>
    </div>
)

Props