Component library

Feedback & status

Loaders, badges, and system state.

History Rail

A form with real timed checkpoints you can preview and jump between.

Pro
Edit history

Checkpoint 1 of 1.

Type in either field, pause, then jump between checkpoints. Nothing ever asks you to confirm losing anything.

Orbit Loader

Two dots orbit a swappable center icon.

Pro
default icon
your icon

Pulse Loader

A sonar-pulse loading indicator with a swappable icon.

Pro
default icon
your icon

Thinking Loader

A spinning icon beside a cycling status word.

Pro
Loading
default words
Loading
custom words + icon

Empty State

An empty panel with a floating icon, breathing rings, and an action.

Pro

Nothing here yet

Items you save will show up in this list.

Success State

A confirmation panel with a spring-in check and particle scatter.

Pro

All set

Your changes have been saved.

Error State

An error panel with a shake and an urgency-pulsed halo.

Pro

Something went wrong

That request failed. Try again in a moment.

Attention Gradient

Notifications whose glow escalates with how often you ignore them.

Pro

Notifications

Security alert

New sign-in from an unrecognized device.

Just opened, back to calm.

Product update

Dark mode is now available in Settings.

Just opened, back to calm.

You were mentioned

@Alex mentioned you in #design-review.

Just opened, back to calm.

Urgency isn't a fixed badge, it's computed from what you actually do: ignore a channel a few times and it genuinely escalates, open it once and it snaps right back to calm.

Recovery Diff

A failed connection that diffs your input and fixes the exact field.

Pro

Connect database

Each failure shows exactly what differs and a one-click fix for that specific problem, not a generic retry.

Scope Preview

Permission toggles that live-preview what the connection could do.

Pro

Connect Calendar

Read your eventsSee event titles, times, and attendees.
Create and edit eventsAdd, move, or cancel events on your behalf.
Read your contactsLook up names to suggest attendees.

Preview: what this could do

Team Sync request from alex@co.com, Friday 2:00 PM.

Checked, your calendar is free then.
Requires read + create access.Add to calendar

Toggle a scope and the preview recomputes live, hover one to see exactly which parts of the example it powers, alone or combined with another.

Cost Preview

A scaling slider that names the prorated charge and affected instances.

Pro

Scale Compute

5 instances running at $18.00/mo each, 16 days left in this billing cycle.

1 instance5 instances8 instances

What changes if you apply this

Monthly cost$90.00
Charged todayNothing, no change
web-1Running
web-2Running
web-3Running
web-4Running
web-5Running

The button states the real consequence itself, a prorated charge or credit today, not a hidden line in fine print, while the list below names exactly which instances would stop or start.

Silent Failure Surface

A jobs panel that batches repeated failures instead of turning red.

Pro

Background activity

3 need a retry
Autosaveevery 30 seconds

3 failed silently, last one a moment ago

Cloud syncevery 5 minutes

All caught up

Nightly backuponce a day

Recovered on its own after 1 failure earlier

Repeated failures of the same job collapse into one calm amber line instead of separate alerts, and nothing here ever turns red, however many times it fails.

Presence Indicator

A live avatar cluster with a pulsing dot and viewer count.

Pro
ECTRAW
3 viewing

Toast

A corner notification with a draining bar and drag to dismiss.

Pro

Dialog

A focus-trapped modal with an iris scrim, stacking, and scroll lock.

Pro

Workspace

The scrim irises open from the button that summoned it and collapses back on close. Tab is trapped; with the tracer on, an outline follows focus and slides the full width of the panel when it wraps. Open the nested explainer and the invite dialog recedes behind it. Drag the panel down by its handle, press Escape, or click the scrim to dismiss; focus returns to wherever it came from.

Alert

An inline callout in four variants, keyed by icon and accent bar.

Pro

A new region is available

eu-central-2 (Zurich) is now open for new deployments.

Backup completed

Snapshot db-2026-08-31 finished in 4m 12s.

Four variants, each keyed by an icon and an accent bar rather than color alone; warning and danger are announced as alerts, the rest as status. Dismissing collapses the alert and the stack slides up to close the gap. The details prop adds a Show details disclosure, action a single button.

Progress

Linear or circular, determinate or indeterminate, in three tones.

Pro
38%
Uploading build38%

Ready to upload.

One Progress component, linear or circular, determinate or indeterminate, in three tones. The determinate fill carries a moving sheen until it reaches 100, then a ring pulses out; the circular ring tweens its stroke offset. Run upload plays a real eased 0 to 100 curve. A proper progressbar role with the right aria-valuenow or aria-valuetext, and a reduced-motion path with no loop animations.

Skeleton Loader

A shimmer-swept placeholder card for loading states.

Pro

Undoable Action

A delete with three real, timed levels of permanence.

Pro

Q3 roadmap notes

Edited 2 hours ago

Delete it, then watch undo move from instant, to a Recently Deleted holding pen, to gone for good.

Waiting State

A deploy narrator with real step timings and no percentage bars.

Pro

Watch “Building assets”: it genuinely runs long, and says so, instead of a bar quietly stalling at 90%.

Permission Negotiator

An in-context permission ask with a working fallback either way.

Pro

Voice notes

Speak your notes instead of typing.

Click Try it. This asks your real browser for one capability, only when it’s needed, and the fallback still works if you say no.

Honest Retry

A rate-limited request with a real countdown and an honest retry.

Pro
Rate limited by the sync API. 0 of 60 requests left in this window. Retrying in 0:09. This is retry 1 of 2.

Sync paused

Retry 1 of 2

Rate limited by the sync API. 0 of 60 requests left in this window.

0:09

The countdown runs on real elapsed time, not a spinner, and explains why it is waiting before it retries itself twice.

Ambiguous Input Resolver

Parsed intent shown as editable pills before anything commits.

Pro
Choose a phrase to interpret.
Try a phrase

Stands in for typed, spoken, or autocompleted input on its way to a parser.

Batch Action Preview

A bulk rename that shows each item's own before and after.

Pro
Renaming tag applies to 4 of 4 tasks.

Rename tag

wipin-progress

  • Redesign settings page

    wipdesignin-progress

    wip becomes in-progress.

  • Fix auth token refresh

    wipbugin-progress

    wip becomes in-progress.

  • Update onboarding copy

    wipin-progresscopy

    Already has in-progress, wip is just removed.

  • Ship v2 export

    wipurgentin-progress

    wip becomes in-progress.

Applies to 4 of 4 tasks.

Uncheck a task to exclude it before applying. One task already has the target tag, so it merges instead of duplicating, shown before you commit.

Draft Recovery

A field that autosaves to real storage and restores itself after a crash.

Pro

Note

Type a few words, pause, then simulate a crash. It comes back on its own, no “restore this draft?” prompt. This uses your browser's real storage, so reloading this page works too.

Comparison Diff

Word-level AI edit suggestions, accepted or rejected hunk by hunk.

Pro
3 of 3 suggested edits still pending.

Suggested edits

3 of 3 pending review

  • The onboarding flow takes about ten six minutes to complete.

  • New users can invite teammates and clients right away.

  • It also supports offline mode for spotty connections and caches recent pages for quick offline access.

Each hunk is its own decision: accept, reject, or undo either one later, nothing commits until you say so.

Ambient Save Indicator

A quiet save dot that grows into a rose bar only when it fails.

Pro
All changes saved
All changes saved

Saved state stays small and quiet. It only grows loud, a full bar with a retry, once saving actually fails.

Multi-Device Handoff

A resumed checkout that names its source before touching anything.

Pro
Found an in-progress checkout from iPhone, 2 minutes ago.

Continue where you left off?

Started on iPhone · 2 minutes ago

ProgressStep 2 of 3 · Shipping info

Cart3 items · $86.50

Continuing shows exactly what state it picked up before filling anything in, not a silent teleport into a half-done form.

Session Timeout Warning

A real expiry countdown that warns early and keeps your draft intact.

Pro

Support ticket #4821

Signed in, session active

The warning arrives with real time left to act, and expiring never touches the draft above, sign back in and it's exactly where you left it.

Disagreement Resolver

Two conflicting signals side by side instead of one overriding the other.

Pro
Fraud rule and Risk model disagree on Order #58213: flag for review?.

Signals disagree

Order #58213: flag for review?

Fraud rule

High risk

Billing country (US) doesn't match shipping country (NG).

Risk model

Low risk

2% predicted fraud probability, 14 clean past orders on this account.

Neither signal is hidden once resolved, only which one wins is recorded, and that decision can still be undone.