Skip to content
Gumdrop
Interactive demos

Demos that ship
the system.

Not isolated components — complete, interactive applications built from Gumdrop tokens and primitives. Six domains, six product shells, one token layer: each demo has its own personality, and AI where it earns its place.

Demos
06
Live
06
Surfaces
33
Primitives
35

Demo library

Six products, six archetypes

Each demo is a separate application with its own routes and its own chrome. None of them pins an accent — every one wears the same site-wide palette you pick, and still has to hold in both modes.

Admin console
01

Commerce admin

Live

Catalog, orders, and roles

An ecommerce CMS console: catalog and inventory, orders with fulfillment and refunds, customers, review moderation, promotions, and role-based access control for the admin team.

Review moderation and low-stock triage surface as decision queues; the RBAC matrix re-gates the entire console live.

Surfaces · 9

Primitives under test

tablesidebarcommandsheetalert-dialogpaginationtag-inputtimeline

One permission model re-gates a whole console live — switch role and the nav, the row actions, and the destructive buttons all follow.

src/app/demos/commerceOpen Commerce admin
Three-pane workspace
02

AI chat workspace

Live

Streaming chat with tool runs

A ChatGPT- or Claude Code-style assistant: streaming replies with tool calls and run traces, a threaded sidebar, and a composer that queues attachments.

Responses stream token by token with visible tool runs; every message can be copied, retried, branched, and rated.

Surfaces · 5

Primitives under test

resizablemessage-scrollerbubbleresponseattachmentcode-blockmarkercommand

The AI primitives hold a real conversation — long transcripts, token streaming, retries and branches — not a posed one.

src/app/demos/ai-chatOpen AI chat workspace
Metered developer console
03

Inference console

Live

Usage, keys, and playground

An AI provider console: request and token usage with a month-end budget, an interactive playground with tool calls, API key minting and rotation, and a model catalog with pricing and latency.

The Playground streams assistant turns with visible tool runs; the Overview and Usage pages forecast spend against a monthly budget.

Surfaces · 5

Primitives under test

json-viewermessage-scrollerchartsparklinecode-blocktimelinesliderempty

Metered numbers and a live playground sit on one surface without either becoming decoration — mono numerals, forecast lines, and a streaming transcript in the same shell.

src/app/demos/ai-providerOpen Inference console
Documentation site
04

Developer docs

Live

Articles, tokens, reference

A documentation site built from the docs shell: editorial article layout, collapsible section navigation, an on-page table of contents with scroll-spy, live token swatches, an API reference, and release notes.

An Ask AI panel answers documentation questions with cited sources, streaming from the article library — and the tokens page rethemes the whole site live.

Surfaces · 6

Primitives under test

code-blockcollapsiblecommandtabstoggle-groupcopy-buttonalertkbd

Long-form reading is a first-class surface — measure, rhythm, and scroll-spy hold up over a full article, not a paragraph of filler.

src/app/demos/docsOpen Developer docs
Dense market table
05

Crypto markets

Live

Markets, watchlist, portfolio

A CoinMarketCap-style market console: 108 assets with sortable columns, signed deltas and 7-day sparklines, a persistent watchlist, global market stats with BTC dominance, and a coin drill-in with range-switchable charts — plus portfolio tracking, sector categories, and a market-data API console.

Each coin's detail sheet opens with a data-driven market summary — trend, volume rank, all-time-high context, and volatility vs the top 100 — generated from the live table.

Surfaces · 4

Primitives under test

tablesparklinechartpaginationpopoversheetinput-groupempty

The dense end of the ramp is a real surface — 108 sortable rows, signed deltas, and inline sparklines that stay legible in every scheme.

src/app/demos/cryptoOpen Crypto markets
Phone column
06

City transit

Live

Departures, journeys, fares

A phone-first transit companion: live departures from the stop you are standing at, a journey planner with three route options, a fare wallet with a scannable pass, and network status — built as a mobile shell that stays a phone column on a desktop.

Every picker is a bottom sheet rather than a dropdown, and the departure board counts down live from the moment the screen opens.

Surfaces · 4

Primitives under test

drawerprogressswitchtoastinputbadgebutton

The system works thumb-first without a separate mobile theme — every picker is a bottom sheet, and the column stays a phone on a 27-inch display.

src/app/demos/transitOpen City transit

Every demo is built from tokens and shipped UI

Demos compose the primitives in components/ui — dialogs, menus, toasts, avatars, badges — and resolve every color, radius, shadow, and motion to a design token, so the whole experience follows the light/dark theme and brand presets without a single hardcoded value. State persists locally so audiences can experiment and reload.

One theme.
Six products.

Every demo is a complete application in a different domain — its own layout, its own workflows, and AI embedded where it earns its place. The only thing they share is the token layer. That is the point: one theme, and six products that prove it.

  • Commerce

    Catalog, orders, reviews, RBAC

  • Developer docs

    Articles, tokens, reference, changelog

  • Incident response

    Severity routing, runbooks, summaries

  • Crypto markets

    Live listing, watchlist, chart drill-in

  • City transit

    Departures, journeys, fare wallet

  • AI workspace

    Streaming chat, tool runs, artifacts