Design Systemshadcn baseTailwind v4

Charply Design System

Shared tokens, shadcn primitives, and extension product templates — popup, side panel, generate, library, agent — plus foundations (accessibility, forms, messaging, layout) and components.

Browse foundation Browse components Storybook ↗

Stack

@charply/design

Shared React primitives and CSS tokens. The single import for all product surfaces.

shadcn/ui (new-york)

Component scaffold via CLI. We own the source code and follow shadcn conventions.

Tailwind v4

Token-driven utility classes. tokens.css bridges CSS vars to Tailwind utilities.

Storybook 10

Component workbench at localhost:6006. MCP endpoint for Cursor agents.

Quick Start

Terminal

npm run storybook           # component workbench → localhost:6006
npm run dev:landing         # docs catalog → localhost:3000/design-system

# Add a new shadcn component to the design package
cd charply-design && npx shadcn@latest add <name>

Usage

import { Button, Badge, Card } from "@charply/design"

<Button variant="outline">Cancel</Button>
<Badge variant="success">Shipped</Badge>

Foundation

View all →

Colors

Shipped

Brand ramp, surface palette, status tones, and usage rules.

Typography

Shipped

The type scale — display / H2 / H3 / body / caption / button.

Spacing

Shipped

4px-base grid, spacing scale, and surface rhythm.

Motion

Shipped

Animation tokens, transition guidelines, and motion principles.

Iconography

Shipped

Lucide icon system — sizing, color, and accessibility rules.

Accessibility

Shipped

WCAG 2.2 AA target — design rules, keyboard nav, and extension constraints.

Forms

Shipped

Field layout, validation, auth templates, and extension form patterns.

Messaging

Shipped

Errors, info banners, empty states, agent status, and content tone.

Layout

Shipped

Popup 450×600, side panel, landing rhythm, elevation, content scripts.

Extension templates

View all →

Extension Popup

Shipped

Chrome popup (450×600): home, Open Assistant CTA, auth entry.

Extension Side Panel

Shipped

Full side panel shell with Generate, Agent, and Library tabs.

Generate Tab

Shipped

Reply generation: context, tone/length, generate CTA, reply options.

Reply Library

Shipped

Saved replies: search, platform filters, favorites, use/edit actions.

Reply Card

Shipped

Single generated reply option with insert, copy, and feedback.

Agent Panel

Shipped

Agent status, pause/stop, assist mode, queue, and session stats.

Shipped

Extension auth: email code or password sign-in.

Signup Form

Shipped

Extension auth: create account with email verification.

Components

View all →

Button

Shipped

The primary action affordance. ONE primary per surface, N secondaries.

Badge

Shipped

Compact metadata and state labels. Pill-shaped with tone variants.

Card

Shipped

Composable surface primitive. Only use elevation when it communicates hierarchy.

Input

Shipped

Single-line text input. Always compose with Label for accessible forms.

Dialog

Shipped

Modal overlay for confirmations and detail views. Radix-powered.

Tabs

Shipped

Section switching for grouped content panels. Radix-powered.

Switch

Shipped

Boolean toggle for immediate-effect settings.

Tooltip

Shipped

Short contextual help. Use for supplemental info, not primary instructions.

Textarea

Shipped

Multi-line text input for drafts and prompts.

StatusBadge

Shipped

Agent workflow state summary: scanning, queued, posted, error.

EmptyState

Shipped

Editorial empty state. Empty is a brand moment, not an apology.

Label

Shipped

Accessible form field label. Radix Label, always paired with a control.

Callout

Shipped

Page-level banner for info, warnings, errors, success, and upsell prompts.

Accordion

Shipped

Expand/collapse sections for dense settings and FAQ patterns.

Alert

Shipped

Inline status alert with icon, title, and description. role=alert.

Spinner

Shipped

Loading indicator for async actions, panels, and button pending states.

Toast

Shipped

Ephemeral confirmation and error feedback. Toaster + createToastStore.

Popover

Shipped

Floating panel for tasks and onboarding nudges. Includes PopoverMessage.