[ N · 00 ]PLOT / UI / 0.0.1[ S · 99 ]DEC · 2026
V0.0.1·PLOT · UI KIT·MAINTAINED BY RAHUL

Editorial UI for internal tools.

Token-driven primitives, dark-first. Drop into any Next.js project.

47components9color tokens3type familiesMITlicense
§01 · INSTALL

Installation.

Install Plot UI via npm:

npm i @uiplot/ui

Or just tell your agent to set it up:

Install Plot UI (npm i @uiplot/ui). Wrap your root layout’s children in <ToastProvider /> and import @uiplot/ui/tokens.css at the top of app/layout.tsx.

If installing manually, add <ToastProvider /> to your layout, and import the tokens:

import { ToastProvider } from "@uiplot/ui";
import "@uiplot/ui/tokens.css";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ToastProvider>{children}</ToastProvider>
      </body>
    </html>
  );
}

That’s it. Now you can use any component from @uiplot/ui — like useToast — in any client component.

§02 · FOUNDATIONS

Tokens, type, geometry.

COLOR · 9 BASE TOKENSHEX
bg#111111
surface#161616
menu#252525
border#2a2a2a
fg#f0f0f0
muted#a0a0a0
accent#ff5800
success#4ade80
danger#e05a5a
TYPE · 3 FAMILIESSCALE
CORMORANT GARAMOND · TITLE
Devouring details
JETBRAINS MONO · LABEL
METRIC · VALUE · STATUS
INTER · BODY

Body copy stays soft and slow. Long lines, generous leading.

RADII · 5 STEPSPX
3
6
8
12
16