marialungu/monstera

UI Components library built with Lerna

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

Name	Type	Default Value	Available values	Description
type	string	primary	primary secondary tertiary	Applies styling according to styleguide
label	string	''	-	The label of the button
size	string	medium	large medium small	Defines the size of the button according to styleguide
disabled	bool	false	true false	Disables button when value is true
fullWidth	bool	false	true false	Button takes the width of the container when value is true
onClick	function	null	-	Callback function for click event
className	string	''	custom	Component can accept custom styling
icon	svg	''	any svg	SVG Icon for the button

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

Name	Type	Default Value	Available values	Description
type	string	body	hero h1 h2 h3 body caption	Applies styling according to styleguide
disabled	bool	false	true false	Disables button when value is true
className	string	''	custom	Component can accept custom styling