cleanplate v0.0.54
cleanplate
CleanPlate - Headless React UI Framework
Installation
npm install cleanplate
Check all versions at NPM.
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";
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>
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>
Badge
import { Badge } from "cleanplate";
<Badge label="New" />
AppShell
import { AppShell } from "cleanplate";
<AppShell />
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}
/>
Icon
import { Icon } from "cleanplate";
<Icon name="settings" size="small" color="balck">
View all the available icon names from Google Material Icons.
Modal
import { Modal } from "cleanplate";
Documentation & Demo
Storybook playground is available for all components at https://cleanplate.sivadass.in.
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago