Pine Design System

Token-driven themes, React UI components

Pine Design System is a React UI library that lets you switch between basic, game, and crayon looks in a single codebase. Built on Base UI for accessibility, with light and dark mode support.

$npm install pine-design-system

Components

Toggle the design to see every component update instantly — same code, different design prop.

Button
Badge
PrimaryActiveWarningDanger
Checkbox
Switch
TextField
Tab
Text

Large Bold

Medium Regular

Small Neutral

Token-based theming

Vanilla Extract token contracts keep color, spacing, and typography in one place, resolved per theme.

Built on Base UI

Headless primitives for keyboard and screen reader accessibility with consistent behavior.

Light and dark

Sync the theme prop with system preferences so every design supports light and dark mode.