React feedback and status components
Toasts, progress bars, loaders, empty states, alerts and other components that report what the system is doing right now. Use these to confirm an action succeeded, show that something is in progress, or explain why a view is empty.
48 components
Loader Braille
Determinate/indeterminate loader built from braille dot patterns, where each cell's eight dots are individually addressable for far finer granularity than a block-character bar.
Progress Hatch
Engineering-drawing progress meter: a light hatch track and a dense shade-ramp fill with a dithered leading edge, an inline right-aligned numeric readout, and a box-drawing ruler of ticks below.
Loader Iris
An ambient loading glyph shaped as a six-blade camera-iris diaphragm breathing open and shut inside a fixed housing ring — one wedge shape repeated by rotation, its shared displacement keyframe overshooting each open and close before settling on a spring.
Loader Die Tumble
An ambient loading glyph shaped as a die tumbling face over face on a fixed axle — each 90deg landing overshoots by 8deg and corrects on a spring, with a floor shadow compressing and flaring in sync, rather than rotating cleanly to a stop.
Loader Spring Bars
An ambient loading glyph shaped as a row of leaf springs on a rail — one displacement keyframe, staggered per bar by negative animation-delay, reads as a single pulse of energy travelling down the rack rather than bars animating in isolation.
Loader Ink Blob
A small canvas-2D assistant-state indicator: a soft ink blob traced through 72 points around a circle, each perturbed by one of six distinct motion signatures — idle, thinking, listening, speaking, success, error — with a checkmark or X that strokes itself in for the two settled states.
Notification Bell Swing
A notification bell whose clapper physically rings — arrivals add an impulse to a damped harmonic oscillator swinging the clapper and recoiling the bell body, bursts read as one cumulative swing rather than N separate dings, and opening the tray damps the bell to rest and drains the badge.
Network Packet Trace
A small hairline node/edge network where data pulses branch across random routes, easing along each edge with a fading tail — idle traffic, dense active traffic, or an error state where packets queue up at a congested hub node.
Gauge Capacity Waterline
Capacity-vs-legal-limit meter drawn as a ship's side-profile hull with Plimsoll load-line marks: the waterline rises with load, the hull itself settles a few px deeper on a separate spring, and the S mark flips to amber the moment load passes the legal limit.
Split Flap Board
A split-flap departure-board display for short status strings — each character cell hinges its top half down over the bottom on a hard-creased 3D flip, cycling through a short burst of glyphs with per-cell stagger so a text change ripples left-to-right like clattering airport signage.
Status Sphere Dots
A canvas-free AI thinking indicator: a rotating sphere of depth-cued SVG dots. Four states — thinking, searching, done, idle — distinct by motion, not color, legible from 24px inline to a 200px showpiece.
Empty State Pegboard
Empty state modeled on a workshop pegboard — dashed silhouettes preview the exact card/avatar/title geometry of future items, and creating one hangs it onto its shadow with a spring settle.
Loader Pendulum Sync
An indeterminate loader for long background work — a row of pendulums with slightly different periods drift from unison into apparent chaos and back into perfect sync on a knowable ~10s cycle, pure CSS with zero per-frame JS.
Not Found Postmark
A 404 rendered as returned mail — the failed URL addressed on an envelope that slides in, its routing history stamped hop by hop (edge, origin, router) as sequential ink postmarks, the last hop knocked down with a squash-and-settle NO SUCH ADDRESS hand-stamp and a 1px shake, then a forwarding-address label (search, home, recent pages) peels on as the real recovery page.
Button Cooldown Heat
A rate-limited button that heat-soaks: each press deposits heat into a visible bottom-up fill, dilates its letter-spacing, swells its surface and brightens its border, growing a heat-haze shimmer as it nears the limit and decaying exponentially (fill draining, haze fading) when idle — hammered past its duty cycle it soaks into a distinct hazard-hatched dead state, going dead on a flat 1px dip until it visibly cools back below the re-arm mark.
Toast Newton Cradle
A toast stack that behaves like a Newton's cradle: a new toast swings in and strikes the queue, a fast domino of shunts carries the impact down the stack, and past capacity that momentum visibly ejects the oldest toast off the far end.
Progress Wick
A determinate progress bar that advances by capillary action — quick pull, slowing soak, brief dwell, next pull — with a faint wet-front runner previewing the track a few pixels ahead of the true fill, so bursty real-world progress (chunked uploads) reads as natural rather than janky.
Meter Threshold Trip
A data-driven threshold indicator built like a thermostat's bimetallic strip: it bows progressively as a metric climbs, snaps across a visible contact gap at the trip point and latches, then only re-straightens once the value falls below a lower re-arm mark — making hysteresis visible instead of implying it with a color change.
File Upload Seal
File upload where progress is the container: a loose dashed outline 24px outside the card pulls taut as the file uploads, clicks shut with a pucker at 100%, and relaxes back out with a wobble on failure.
Empty State Survey
First-run empty state as a surveyor's staked plot: corner stakes drop in, then dashed strings tauten around the future layout and tie off at the CTA.
Success Plumb Bob
A success moment built on a plumb bob instead of confetti or a checkmark — the bob drops, overshoots into a damped pendulum swing, and the instant it settles collinear with a fixed datum line, a level line draws outward from its tip and the success text rises onto it.
Tool Call Board
An agent's tools hung on a board like fishing tackle — slim capability chips at rest, each lifting and paying out a streaming-argument strip the instant its tool is called, with a recency underline that fades over 60 seconds.
Meter Latency Capillary
Time-to-first-token rendered as calibrated capillary rise — a narrow tube climbs to a scribed p50 line, holds and trembles if it's running slow, and only surfaces retry/switch-model once it's genuinely past p95. Never fakes progress.
Skeleton Schema
Schema-driven skeleton for streaming structured LLM output — every field, key, and array slot renders as a dashed empty mold the instant the shape is known, then sets solid field-by-field as values pour in.
Feed Escapement
Live feed where a small SVG anchor fork gates arrivals one at a time — a burst becomes a metered tick-tick-tick instead of a dogpile, held open only by each item's own spring-settle, not a schedule.
Refresh Pull Flywheel
Pull-to-refresh as a crank and flywheel: pulling down winds a spoked SVG wheel through a rack-and-pinion drivetrain, release hands it angular momentum, and the wheel freewheels through the request in flight before the response brakes it to a stop as new rows settle in.
Meter Quota Meniscus
A quota (storage, API budget, seats) rendered as liquid in a thin vessel where surface curvature, not level, carries the reading: concave under the soft limit, flat at it, convex and overfull-but-held in the grace zone, and a bead that breaks off past the hard limit leaving a permanent stain.
Toast Undo Fuse
Undo toast whose remaining lifetime is a literal fuse — a hairline along the bottom edge burns right-to-left with an ember at the front, answering "when does this go away" without a numeric countdown.
Meter Quota Rule
A quota meter with no bar, no fill, no pill: the printed reading ('38.2 GB of 100 GB') sits above a 4px hairline whose used portion is solid and remainder is dashed, a fixed tick marks the warning threshold, and crossing it thickens the rule and bolds the digits instead of turning anything red.
Empty State Sonar
An empty state that pings like sonar every 6-8s to actively demonstrate emptiness, then freezes and grows skeleton rows outward the instant real results interrupt it.
Typing Indicator Trace
Multi-user typing/presence as a live seismograph strip — one hairline trace per participant, scrolling leftward and spiking with their real keystroke cadence, never a looping three-dot bubble.
Badge Unread Tarnish
Unread badge that tarnishes like brass: solid when fresh, an outline within a day, a muted ring after a week — new activity instantly re-polishes it with a small flare.
Autosave Ratchet
Autosave status as a mechanical ratchet — a 10-tooth gear advances one notch per saved change and tallies the session in its rotation, while a failed save kicks the wheel back half a tooth and holds that broken pose until the next save resolves it.
Progress Telegraph Log
Live telegraph feed for multi-stage operations of unknowable total duration: each real sub-step arrives as its own line with a ticking elapsed timer, then collapses into a dense done-ledger with its true cost frozen — stalls are self-evident because the active timer keeps counting while nothing new arrives.
Banner Tear Stub
A dismissible notice with a perforated edge: dismissing rips the panel off along the perforation, leaving a small permanent stub that reopens it.
Loader Thread Spool
A loader that winds thread onto a spool while duration is unknown, then converts the same coil in place into a proportional gauge the instant total size arrives — the indeterminate-to-determinate handoff as one continuous object, never a spinner swapped for a bar.
Event Stream Vapor
A Wilson cloud chamber for your event stream — each real event condenses into a soft vapor trail (angle by category, length/brightness by magnitude) that diffuses away over seconds, with a paired Geist Mono log so the same stream reads in words.
Tabs Carriage
Tabs whose underline is a typewriter carriage on a rail — forward moves glide on a spring and stretch with speed, backward moves snap home faster with a ding-bounce, and the panel line-feeds in from the travel direction.
Loader Loom Weave
Loader as a loom — warp threads span the frame, a shuttle carries the weft back and forth alternating direction per row like real weaving, and progress is the woven cloth accumulating row by row, each pass beaten up against the fell with a small compression bounce.
Meter Context Window
A context-window budget meter: one hairline stacked bar segmenting the window into system prompt / tools / history / current turn, told apart by fill pattern instead of color, that visibly resettles rather than jumps when the window compacts.
Status Glyph Cadence
A 20-64px inline status glyph for agent work where the motion pattern itself is the signal — five states, five distinct cadences, no color and no swapped icon.
Timeline Agent Lanes
Live multi-agent turn tracker — one hairline lane per agent, the lane holding the turn brightened to foreground, handoffs drawn as stepped connectors with mono duration labels.
Skeleton Develop
Loading wrapper whose placeholder blocks develop into the real content — a masked sweep resolves the text instead of swapping it.
Empty State Dashed
Empty state whose dashed SVG boundary drifts like a plot marked out and not yet planted, and contracts toward the CTA on hover.
Not Found Knockout
404 numerals rendered as literal absence — destination-out punches the glyphs through a token surface plane to reveal a deep grain void with drifting motes, defined by a bright stencil bevel rim and an inner wall-light glow so the digits read instantly in both themes, edges springing outward near the cursor.
Toast Gravity Stack
Toast stack with real gravity — notifications thud into a jostling heap, errors sink under their own mass, and the pile resettles when one is dismissed.
Progress Narrated
Determinate progress bar whose leading edge narrates each phase in typed mono, then docks it below the track as a timestamped milestone ledger.
Countdown Vapor Digits
Live countdown where each digit change is a phase transition: the outgoing digit sublimates into grains on curl-noise wind while the incoming digit condenses from the same cloud.