Installation

Requirements

React 19
Tailwind CSS v4
TypeScript (recommended)

1. Install the base packages

pnpm add @base-ui-components/react lucide-react clsx tailwind-merge

2. Add the Plinth tokens

Download the token stylesheet and import it after Tailwind in your global CSS:

@import "tailwindcss";
@import "./plinth.css";

The stylesheet is served at /r/plinth.css. It contains the full three-layer token system (primitives, semantic roles, Tailwind mappings) plus base styles. See Theming for how it's organized.

3. Add the `cn` helper

lib/cn.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

4. Install components

Each component page has its install command. They all follow this shape:

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/button.json

The CLI copies the component source into your project: from then on it's your code.

Dark mode

Plinth switches theme when a dark class is present on any ancestor (usually <html>). Any theme switcher that toggles that class works; no Plinth-specific setup needed.