Introduction

What is Plinth?

Plinth is not a package you install and fight with. Every component is a single, readable file you copy into your project and own. Change a class, add a variant, delete what you don't need. The library stays out of your way because it lives in your codebase.

One accent color, one radius value and a light and dark palette drive every component. Switch them in the theme customizer and copy the CSS.

Principles

• Accessible by default. Real buttons, labels, roles and focus states. Keyboard support is written in, not bolted on.
• Tokens, not hex codes. Components use semantic colors like bg-surface and text-muted, so both themes work everywhere.
• No runtime dependencies. React, Tailwind CSS and Lucide icons. Charts, the date picker and the command palette are written from scratch.

Your first component

Import from components/ui and compose. This card and button pick up the current accent and radius.

import { Button } from "@/components/ui/button";import { Card, CardBody, CardHeader } from "@/components/ui/card"; export function Upgrade() {  return (    <Card>      <CardHeader title="Upgrade to Team" description="Unlimited projects and shared themes." />      <CardBody>        <Button variant="primary">Start 14-day trial</Button>      </CardBody>    </Card>  );}

What's inside