Accessible React components with an AI agent UI kit (prompt input, reasoning, tool calls, plans with approval, citations, traces), GSAP motion and live theming.
Neutral greys with Supabase green buttons. Light and dark mode. Font: Inter. Supabase uses Circular, a commercial face; Inter is a close, neutral open alternative.
Toggle switches in three sizes with a stretch-on-press thumb.
Labeled settings separated by dashed rules.
Small, medium, large and disabled.
Semantic tables with mono numerals, zebra rows and a sticky header.
Status badges, numeric columns and a footer total.
Segmented and underline tabs with a gliding active indicator.
A full-width segmented control.
An underline indicator that follows the label width.
Type tags into one field, with suggestions, paste and keyboard removal.
Suggestions, paste and keyboard removal.
A to-do list the agent works through, with progress.
Four items, one in progress.
Streaming command output in a dark console.
A test run streaming.
Square corners, compact, mint signal, Space Grotesk. Light and dark mode. Font: Space Grotesk.
Pass/fail summary with failing assertions inline.
Two suites with one failure.
Multi-line input that auto-grows, with a live character counter.
Grows with the text and counts toward a limit.
GSAP SplitText reveals by character, word or line.
Chars rising and words blurring in.
A light sweeping through muted text: the "working" status.
Two status lines.
A 3D card that tilts toward the pointer with a moving glare.
A card with a glare.
Timelines whose rail draws itself as you scroll.
Releases with version badges.
Toast notifications with a pausable countdown and promise states.
Default, success, error and a promise toast.
Two-state buttons that sink in when on and ping on press.
Icon toggles and a labelled outline toggle.
Segmented controls with a gliding chip, plus outline and ghost groups.
A range picker, alignment and formatting groups.
A tool call: name, live status, timing, parameters and result.
Success, running and error states.
Inverted tooltips with keyboard shortcut hints and arrows.
Tooltips on all four sides.
Icon buttons whose tooltips show shortcuts.
An agent run on one timeline: agents, model calls and tools.
A support agent with a sub-agent and a retried tool.
Text that types itself out, cycling through phrases.
Four phrases in a heading.
Black and white, Geist, tight corners, blue only for focus. Light and dark mode. Font: Geist, Vercel's own open-source face.
A small browser for what the agent built, with device widths.
A preview with custom content.