plinth-ui-kit

React UI components and design tokens — primitives, controls, hooks, and a small forwardRef-enabled atomic layer (badges, table cells, page header, filter bar), with variant-prop APIs.

Install

npm install plinth-ui-kit

Peer deps: react ^18, react-dom ^18. Requires Tailwind CSS v4 in the consuming app — the package ships design tokens as CSS custom properties (@theme inline) and its globals.css includes an @source directive so your Tailwind build picks up the components' utility classes on import.

Usage

import 'plinth-ui-kit/styles/globals.css';
import { PageHeader, FiltersBar, TableHeaderCell, AtomTableCell, Badge } from 'plinth-ui-kit';

<PageHeader title="Overview" actions={<button>Action</button>} />

<table>
  <thead>
    <tr>
      <th><TableHeaderCell label="Name" checkbox checkboxLabel="Select all" /></th>
      <th><TableHeaderCell label="Status" /></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><AtomTableCell leadAction emphasis="lead" checkboxLabel="Select row">Row A</AtomTableCell></td>
      <td><AtomTableCell variant="badge"><Badge color="success">Active</Badge></AtomTableCell></td>
    </tr>
  </tbody>
</table>

The atomic table cell is exported as AtomTableCell — the plain TableCell name is the low-level table primitive this package also exports.

What's inside

• Atoms — Badge (10 tones), AtomTableCell, TableHeaderCell, PageHeader, FiltersBar, plus Header/Footer/Checkbox/Pagination.
• Controls & primitives — Button, Select, Dialog, Popover, Tabs, Table, Checkbox, Tooltip, pagination, groupable-table primitives, segmented control, badges/tags, and more.
• Hooks — row grouping, custom columns, notification store, chart colors, clipboard.
• Charts and a couple of page-level compositions built from the above.

Notes

• Ships compiled dist/ (ESM + CJS + .d.ts) only.
• Design tokens are CSS custom properties; consumers provide Tailwind v4.