PeachUI

PeachUI is an open-source React component library and live catalog built for dense tools, dashboards, and agent-heavy products. Every component runs live in the browser with copy-ready source and explicit light and dark themes.

Think of it like shadcn/ui where you copy the file and own the code, except it already comes with a full oklch token system, Cursor-like neutral charcoal surfaces, a warm peach accent, and agent primitives like chat composers, thinking states, and triage queues.

After building Aesthetikk, Stellar, and Peachy back to back, I noticed I kept rebuilding the exact same buttons, tables, sheets, and agent status chips from scratch like a goldfish.

Existing UI kits either trap you inside a rigid npm black box where overriding one border radius feels like filing a tax return, or they hand you bare unstyled bones and wish you luck.

I wanted a catalog where the components are actually meant to be stolen. Small files, obvious CSS variables, zero mystery abstractions. Paste the file into your repo, tweak the tokens once in globals.css, and go back to shipping your actual product.

The design foundation lives in app/globals.css on Tailwind v4 and a v3 oklch color system. Light mode sits on near-white paper with graphite ink and a warm peach-coral accent. Dark mode uses layered Cursor-style charcoal with zero muddy hue cast on cards and hairline light rings for elevation.

Theme switching runs through an explicit .dark class on the root html element with a pre-hydration sync script stored under peach-ui-theme. Toggling between light and dark happens in place without flashing a white screen in your face at 2 AM.

No component uses hardcoded hex values, except for a tiny white inset highlight on filled buttons.

The library is split into three tiers so you only take what you need:

• Tier A (Atoms): 40+ foundation controls including Button, Input, TextField, Select, Checkbox, Switch, Radio, Badge, StatusPill, Dialog, Sheet, Tabs, Tooltip, Kbd, ProgressBar, and Skeleton.
• Tier B (Primitives): 50+ product and agent patterns like AgenticComposer, ThinkingState, CommandPalette, RecordsTable, FilterTable, BoardCard, MetricTiles, TimelineFeed, CodeBlock, and NotificationBell.
• Tier C (Blocks): 40+ composed multi-component flows for agent review queues, inbox triage, and operational dashboards.

Tier B and C compositions rendered straight from the catalog: an ops dashboard, a CRM pipeline with an agent next-step panel, a model router, an audit log, a settings page, a billing view, and a full agent studio shell. Same tokens, same hairlines, across light and dark.

Every component in the catalog has to pass a strict set of UI, typography, and writing checks before it ships:

• Tactile geometry: Concentric border radii on nested surfaces, shadows for elevation, and hairline borders for state. Buttons scale to 0.96 on press with a static escape hatch when you need things quiet.
• Interruptible motion: Specific CSS property transitions only. Transitioning all is banned so rapid clicks never stutter.
• Typography discipline: Semantic type tokens, tabular numerals on live counters so numbers do not jitter, and 16px mobile inputs so iOS Safari stops aggressively zooming in on your face.
• Plain microcopy: Sentence case by default, verb-first buttons, empty states that orient you with one next action, and field errors that tell you how to fix the problem without saying "Oops!".
• Minimal useEffect: Built around React 19 composition and server-friendly patterns. Effects stay out of component logic unless a DOM observer or theme hydration actually requires one.

The public site is a Next.js 16 app wired to a typed registry in lib/registry.ts. You can browse the Foundations bento to inspect color ramps, type scales, and shadow stacks, or jump straight into the component grid.

Each card renders the live interactive demo alongside variants, a code overlay, and a one-click Copy source button. The copied snippet includes a short header listing any peer dependencies so the file compiles on the first paste.

Building PeachUI forced me to turn all the scattered UI habits from my previous apps into a real system.

One funny realization along the way: redistributing Apple SF Pro font files in an open-source repo is a fast way to summon lawyers, so making sure the system-ui and web font fallback stack looked just as sharp became part of the job.

The catalog is live and the repo is open on GitHub. Go steal a button or an agent composer, and check out the motion shots over in the Gallery.