A headless React UI framework — reusable, accessible components you can style to match your brand. No opinionated theme; you bring the look and feel.

• Installation
• Quick start
• Available components
• Documentation
• TypeScript
• LLM / AI-friendly docs
• GitHub MCP server

• React 18 or higher
• React DOM 18 or higher

npm install cleanplate

Or with Yarn:

yarn add cleanplate

Published packages: npm — cleanplate

Import the reset and base styles once at your app root (e.g. main.jsx, App.jsx, or index.js):

import "cleanplate/dist/index.css";

All components are named exports from cleanplate:

import { Button, Typography, Container } from "cleanplate";

function App() {
  return (
    <Container padding="4">
      <Typography variant="h1">Hello</Typography>
      <Button variant="solid" onClick={() => alert("Saved!")}>
        Save
      </Button>
    </Container>
  );
}

import { Button } from "cleanplate";

<Button variant="solid">Primary action</Button>
<Button variant="outline">Secondary</Button>
<Button variant="ghost">Tertiary</Button>

Variants: solid, outline, ghost, icon. Sizes: small, medium.

import { Typography } from "cleanplate";

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="p">Body paragraph.</Typography>

Variants: h1–h6, p, span, small.

import { FormControls } from "cleanplate";

<FormControls.Input
  label="Email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

<FormControls.Select
  label="Country"
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
  ]}
  value={country}
  onChange={(e) => setCountry(e.target.value)}
/>

Other form primitives: TextArea, Checkbox, Radio, Date, File, Toggle, etc.

Uses Google Material Symbols. Include the font in your app; then:

import { Icon } from "cleanplate";

<Icon name="settings" size="small" color="black" />
<Icon name="check_circle" size="medium" />

Import any of them from cleanplate:

import {
  Button,
  Typography,
  Container,
  Header,
  PageHeader,
  BreadCrumb,
  Table,
  FormControls,
  // ... etc.
} from "cleanplate";

• Storybook — Interactive playground and docs for every component:
  https://cleanplate.sivadass.in
• GitHub — Source and issue tracker:
  github.com/sivadass/cleanplate

CleanPlate is written in TypeScript and ships type definitions. Types are included in the package (dist/index.d.ts). No extra @types package needed.

import { Button } from "cleanplate";
import type { ButtonProps } from "cleanplate";

The repo includes documentation aimed at AI assistants (e.g. Cursor, Claude Code):

• llms.txt (project root) — Index of all components with file paths, purpose, and features. Point your AI at this file to discover the right docs.
• docs/ — One Markdown file per component (e.g. docs/Button.md, docs/PageHeader.md) with props, types, examples, and behavior.

Reference llms.txt or docs/<ComponentName>.md in your prompts when using Cursor or Claude Code for more accurate suggestions.

This repository is compatible with the GitHub MCP server (Model Context Protocol). The GitHub MCP server lets AI assistants (e.g. in Cursor or VS Code) access GitHub—repos, issues, pull requests, and workflows—so you can work with this codebase using natural language.

• Compatibility: CleanPlate is a standard GitHub repo with no special constraints. The GitHub MCP server can read and interact with it once connected.
• Setup: Add the GitHub MCP server in your editor:
  • Cursor: Settings → Tools & MCP → add the GitHub MCP server (or add it to ~/.cursor/mcp.json). Use Cursor’s MCP docs for the exact config.
  • VS Code (1.101+): Use the MCP servers UI or add the server to .vscode/mcp.json. See GitHub: Using the GitHub MCP Server.
• Auth: You’ll need to authenticate with GitHub (OAuth or a Personal Access Token with the scopes the MCP server needs).

No project-level MCP config is required; configure the GitHub MCP server in your editor or global config and point it at this repo.

MIT © Sivadass N