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 |