A React UI Components library built with Lerna and deployed with shipjs.
A simple UI components library for React, created with Lerna and showcased with React Storybook
Find live documentation here.
All Monstera packages are available on npm
yarn add @monstera/ui-components
# or
npm install @monstera/ui-components
Buttons can be used for actions in a app, from submitting forms to menus or applying filters
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>
)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} />
)| 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 |
The Text component is used for rendering copy in the app
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>
)| 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 |