a component candy shop

UI Candy

Tasty little components for AI-native interfaces. Every one runs live below — poke it, then steal the code. Vanilla JS, no dependencies, no build step.

01

Snap Carousel

The Kit

One card at a time, mandatory snap, arrows in the gutters, N/total counter. Tapping a card acts in place — the page never scrolls, cards never change height.

02

Step-Through

The Kit

Walk a process one tap at a time, Glide feel. The Next button is pinned — its resting position is pixel-identical on every step, even mid rapid-fire.

03

Before / After

The Kit

Drag the Notch divider 1:1 with your finger. Tap anywhere to glide there. The container never changes size, so dragging can't shift the page.

04

Morph Button

The Kit

One button, two sequential actions. Tap Copy — on success it springs into Share. Type anything and it morphs right back. WAAPI choreography, interruptible mid-flight.

05

A/B Toggle

The Kit

One switch, every tap flips — no side-picking. The thumb always shows what's on screen, and the stage crossfades beneath it.

06

Decision Board

The Kit

The "goated" flow: tappable options, per-question notes, everything autosaves. Copy your picks when you're done deciding.

07

Zoom Bars

Data Viz

For comparisons where the interesting difference is tiny. Each bar gets a magnified inset strip so the sliver you actually care about becomes visible.

08

Dot-Grid Simulator

Data Viz

N dots = a population. Flip scenarios and watch the outcome ripple through, staggered so your eye can follow every dot.

09

Live Formula Slider

Data Viz

One slider drives every readout plus an insight line that states the takeaway in words. What-if calculators, minus the spreadsheet.

10

Estimator + Caveat

Data Viz

A computed estimate beside a caveat card that outranks the numbers. The warning is always visible — never behind a toggle.

11

Streaming Text

AI-Native

Streamed answer with inline sources, actions, and follow-ups. Copied from beautifului.dev (MIT).

12

Thinking

AI-Native

Expandable thinking traces — steps, reasoning, search, coding. Copied from beautifului.dev (MIT).

13

Approval Card

AI-Native

Human-in-the-loop, minus the anxiety. The agent shows the exact command and waits — nothing irreversible runs until you say so.

14

Prompt Bar

AI-Native

The composer's composer: @ sources, / commands, a 16px input so iOS never zooms. Send actually does something here.

15

Task Timeline

AI-Native

Watch the agent work its plan: queued → running → done. One task flakes on purpose — honest UIs show failure too.

16

Tool-Call Chat

AI-Native

An assistant message that shows its receipts. Expand the tool calls to see exactly what ran and what came back.

17

Loading State

AI-Native

Pixel-grid loader with shimmer and elapsed time. Copied from beautifului.dev (MIT).