61 SPECIMENS · LIGHT + DARK

Every primitive.

A full component library in one file — tokens, forms, overlays, data, and chat UI — ready to hand to any agent or developer. Press ⌘K to jump around.

Browse the library 9 groups · vanilla JS, no deps

REUSE A PATTERN

Named classes like .btn-primary, .field, .panel hold the repeated styling — apply the class instead of rebuilding the utility list.

WIRE UP AN OVERLAY

openPanel(id), closePanel(id), togglePanel(id) handle every dialog, sheet, dropdown, and popover.

FIND A COMPONENT

Every group below is a named anchor (#forms, #overlays …) — see the index comment at the top of the file.

GROUP 01

Foundations

Color, type, shape, and motion — the tokens everything else is built from.

COLOR

TYPOGRAPHY

Aa Bb

Display / Space Grotesk 600

Lead paragraph text for intros.

Lead / Inter 400

SKU-04291 · caption / metadata

Mono / Plex Mono

SHAPE & ELEVATION

6px

16px

full

shadow xs

shadow md

shadow lg

MOTION

Hover lift

Press scale

Ambient float

GROUP 02

Layout

Cards, containers, and the structural pieces that hold content.

CARD

BASIC

Basic card

Flat surface, soft shadow.

ELEVATE

Hover lift

Try hovering this one.

BORDERED

Outlined

Border instead of shadow.

GLASS

Frosted

Backdrop blur.

ASPECT RATIO

16 / 9

SEPARATOR

Section one

Section two

Left
Right

ACCORDION

Every token and component shown on this page, in one HTML file.

No — just Tailwind's CDN build and vanilla JS.

Toggle it from the top-right corner of the page.

COLLAPSIBLE

v1.2 — added chat UI kit and data table sorting.
v1.1 — dark mode tokens.
v1.0 — initial release.

EMPTY STATE

No products yet

Add your first item to start tracking inventory.

ITEM

Inventory sync

Last run 4 minutes ago

Active

Payment gateway

Stripe · connected

RESIZABLE

Panel A
Panel B

SCROLL AREA

Row one — scroll me

Row two

Row three

Row four

Row five

Row six

Row seven

GROUP 04

Forms & inputs

Every control needed to capture input, plus their states.

BUTTON

BUTTON GROUP

Input OTP

—

Slider

60%

Checkbox

Radio group

Switch

Notifications

Toggle

Toggle group

Native select

Select custom

Combobox

Date picker

CALENDAR standalone, selectable

SMTWTFS
GROUP 05

Overlays

Everything that floats above the page.

DIALOG

ALERT DIALOG

SHEET

DRAWER

POPOVER

HOVER CARD

JL

Jordan Lee

Store manager · joined 2024

TOOLTIP

Synced 2 minutes ago
GROUP 06

Feedback

Status, progress, and interruption — used sparingly.

ALERT

Order fulfilled. Stock levels updated automatically.

Low stock. 6 items below reorder threshold.

Sync failed. Retry the last push.

BADGE

ActivePendingFailed

KBD

⌘K

SPINNER

SKELETON

PROGRESS

TOAST

SONNER stacked

GROUP 07

Data display

Avatars, tables, charts, and carousels.

AVATAR with status marker

JL
RT
+3MKSL

TABLE static

ItemSKUStatus
Wireless MouseSKU-1042In stock

DATA TABLE sortable — click a header

Item SKU Stock Price

CHART bar

CHART line

CAROUSEL

Item 01

Item 02

Item 03

Item 04

GROUP 08

Chat UI

Primitives for building an assistant or messaging surface.

ATTACHMENT

inventory-q3.csv

248 KB

MARKER variant = separator / default / border

APR 2, 2026
Order #4821 confirmed
Payment declined — card expired

Flagged for review

Customer requested a refund

Jordan added a private note
AI suggested a reorder of 120 units

BUBBLE & MESSAGE

AI
Stock on SKU-1042 dropped below threshold — want me to draft a PO?

9:41 AM

Yes, 120 units.

9:42 AM

MESSAGE SCROLLER mini chat widget

AI
Hi! Ask me anything about your inventory.
What's low on stock?
AI
6 items are below their reorder point — Desk Lamp is the most urgent.