CleanPlate

A headless React UI Framework

Installation

With NPM:

npm install cleanplate
Copy

With Yarn:

yarn add cleanplate
Copy

Usage

All components can be consumed by import using their respective names from cleanplate package.

Initial Setup

Import the CSS Reset and minimal cleanplate styles at top most level or root level.

import "cleanplate/dist/index.css";
Copy

Button

import { Button } from "cleanplate";

<Button variant="primary" onClick={() => {}}>Save</Button>
<Button variant="secondary" onClick={() => {}}>Save</Button>
<Button variant="nude" onClick={() => {}}>Save</Button>
<Button variant="special" onClick={() => {}}>Save</Button>
Copy

Typography

import { Typography } from "cleanplate";

<Typography variant="h1">Hello World!</Typography>
<Typography variant="h2">Hello World!</Typography>
<Typography variant="h3">Hello World!</Typography>
<Typography variant="h4">Hello World!</Typography>
<Typography variant="h5">Hello World!</Typography>
<Typography variant="h6">Hello World!</Typography>
<Typography variant="p">Hello World!</Typography>
<Typography variant="small">Hello World!</Typography>
Copy

Badge

import { Badge } from "cleanplate";

<Badge label="New" />
Copy

Form Controls

import { FormControl } from "cleanplate";

<FormControl.Input
    name="email"
    onChange={(e) => handleChange(e)}
    value={values.email}
/>

<FormControl.TextArea
    name="bio"
    onChange={(e) => handleChange(e)}
    value={values.bio}
/>

<FormControl.Select
    name="bio"
    onChange={(e) => handleChange(e)}
    options={
        [
            {
                label: "A",
                value: "a",
            },
            {
                label: "B",
                value: "b",
            },
        ]
    }
/>
Copy

Icon

import { Icon } from "cleanplate";

<Icon name="settings" size="small" color="balck">
Copy

View all the available icon names from Google Material Icons.