Components
Everything here.
117 components across 11 families. Search by name or by what it does, or narrow to one family and read it end to end.
Browse117
Agent UI31
The surface an assistant answers through: the thread, the composer, and everything it shows while it is working.
The scroll container a thread lives in. It follows a streaming reply to the bottom, and stops the moment the reader scrolls up to read something older.
16MessageOne turn in a thread, with a role, an optional avatar and timestamp, and actions that stay reachable without a pointer.
17Prompt InputThe composer. Grows with the message, sends on Enter, keeps Shift+Enter for a new line, and turns into a stop button while a reply streams.
18SuggestionsA row of prompts to start or continue with, for the moment someone does not know what to ask.
19QuestionnaireThe questions an agent asks before it starts. One at a time, with single or multiple answers, an open answer alongside them, and required ones it will not move past.
20Ask AIHand someone a prepared, source-aware prompt in the AI assistant they already use, or let them copy it for another one.
21Streaming TextText that arrives a piece at a time from an async source, with a cursor while it runs and sentence-level announcements for screen readers.
22Thinking StateA status row for work in progress, with a live elapsed timer and optional reasoning behind a disclosure.
23Tool CallA compact record of one tool invocation: name, status, duration, and the input and output behind a disclosure.
24Agent ChecklistA task list whose items change state as work proceeds, announcing what changed instead of re-reading the whole list.
25Inline CitationsNumbered markers placed inside generated text, each linking to its entry in a source list underneath.
44Response ActionsThe row under an answer: copy it, ask again, and rate it. Drops into the actions slot on Message.
49Voice InputA microphone that draws what it is hearing, so a live one is told apart from a dead one at a glance.
50Audio PlayerA recording with its shape, its position and its words, so a voice note can be read as well as heard.
51Bar VisualizerFrequency bars for audio on its way out, the counterpart to the trace a microphone draws on the way in.
52Mic SelectorChooses which microphone to use, then settles the question by lighting a meter from the one you chose.
53Chain of ThoughtThe steps an assistant took before answering, open while it is working and folded away once it is done.
55Video PlayerVideo with captions that can be turned on, a real scrubber, and controls that survive full screen.
57Subagent TreeSeveral agents working at once, nested under whoever handed the work down, each with its own state and elapsed time.
58Stopped RunWhat the thread says after an answer ended early, with whatever it had already written kept above the line.
59Memory ChipsEverything an assistant has been told to remember about someone, each one removable on its own.
60OrbA sphere that carries what an assistant is doing, settled when idle and moving with the voice when there is one.
61MatrixA grid of cells lit from the bottom by a level, which reads as a piece of hardware rather than as a chart.
62ResponseAn assistant's answer as markdown, including while it is still half-written and briefly invalid.
63Transcript ViewerA recording as text, where every line is also the way back to the moment it was said.
64Stop GeneratingThe control that interrupts a running answer, with the time it has been going and Escape wired up.
65Token MeterHow much of the context window is gone, split by what spent it, and a warning before it runs out.
66Model PickerA model chooser that has room for what each one is good at, and full keyboard control.
67Source CardOne retrieved passage: where it came from, what it said, and how well it matched.
106Presence FieldAn ambient backdrop that carries what the assistant is doing. It changes colour and pace with the state, and settles into each one rather than snapping to it.
107Stream GlowAn edge that breathes along a region while tokens land in it, and stops the moment they do.
Code5
Code an agent wrote, ran, or wants to change, and the controls to accept it.
A code panel with copy, optional line numbers, highlighted lines, and a collapse for anything long.
42Diff ViewA proposed change shown as a unified or side-by-side diff, with optional accept and reject controls.
43Terminal OutputStreaming command output with stderr called out, an exit code, and scroll that follows without trapping you.
54Web PreviewA sandboxed frame for whatever the assistant just built, with the widths to check it at.
56Reviewable DiffA proposed change reviewed a hunk at a time: take three of the seven, leave the rest, apply what you took.
Documents13
Reading a file someone uploaded, marking it up, cutting it into pieces, and pulling structure out of it.
Selectable regions drawn over a page image from normalized coordinates, for showing an agent exactly where an answer came from.
27Annotation LayerNotes attached to regions of a page. Drag to add one, select to read it, and the coordinates stay relative to the page rather than the screen.
28RedactionMark regions to black out before a document leaves the building, with a reveal that says plainly it is only a preview.
29Page NavigatorA rail of page thumbnails for moving through a long document, with arrow-key navigation and a clear active page.
30File TreeAn expandable tree of folders and files with full keyboard navigation and correct tree semantics.
31Document SplitsMark where one scanned batch becomes several documents. Splits are toggled between pages and the segments update as you go.
32Schema BuilderBuild the shape you want extracted from a document. Fields carry a name, type, description, and requirement, and object and array fields nest.
33Signature PadSign with a pointer on a canvas, or type a name instead. Returns a PNG data URL or the typed text.
34CSV ViewerA real table for delimited data, with sortable columns, a sticky header, and a row cap so a large file cannot lock the page.
35JSON ViewerA collapsible tree for a JSON payload, navigable from the keyboard, where every row can hand you its path.
36DOCX ViewerRenders a Word document as elements built through an allowlist, so a file you did not write cannot bring its own scripts or links.
37PDF ViewerPage-by-page PDF rendering on a canvas, with paging and zoom, over any loader you give it.
38Markdown BlocksExtracted document regions rendered as markdown, each one selectable so it can be tied back to where it came from.
Files2
Getting a file in, and showing what arrived.
Feedback7
What the page says while it waits, and when there is nothing to show.
What to show when there is nothing yet: what this place is for, and the way to fill it.
72Empty RowOne line saying a list came back empty, for a table, a list, or a popover.
73Not FoundThe page-scale empty state: a status, a heading you can read across a room, and somewhere to go.
76SpinnerThe smallest way to say something is happening, for a control that is working.
77Shimmering TextWords with a light moving across them, for the wait between asking and the first token.
78SkeletonA placeholder the shape of what is coming, so the page does not jump when it arrives.
79Status PillA dot and a few words: operational, degraded, closed.
Controls16
Familiar inputs with more feedback than usual, and none of it required to operate them.
Familiar tabs with a gentle pull toward the pointer. Selection stays clear and keyboard navigation remains immediate.
02Elastic SliderA precise slider with a small amount of give at either end. The current value stays visible and the control works without a pointer.
03Hold ButtonA confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.
04Shift ButtonA call to action that trades its leading icon for a directional cue when someone approaches it.
05Impossible CheckboxA checkbox with one stubborn rule: the bear will not let you leave it on. Best kept for demos, Easter eggs, and harmless preferences.
09Save BarA bar that exists only while a form has unsaved changes. It says so, saves, confirms, and leaves.
45Theme ToggleA light and dark switch that survives a reload, follows the system when asked, and stays in step across tabs.
46AccordionA list of disclosures built on native details elements, so find-in-page and the browser do the work.
80Copy ButtonCopies a value and says whether it worked, including when the clipboard refuses.
81Secret FieldAn API key or token: hidden until asked for, copied whole either way.
108Scrub BarThe seek control on its own: a slider that happens to be a timeline, announced in minutes and seconds.
109OTP InputA one time code, one box per character, where pasting the whole code into any box fills the rest.
110Tag InputAn input that turns what you typed into a removable tag, and gives the last one back when you press backspace on an empty field.
111ComboboxA field that narrows a list as you type, and holds one choice or several as removable chips.
112Sortable ListA list reordered by dragging a handle, or from the keyboard without one, where every move is announced.
114StepperWhere someone is in something with a beginning and an end, said in words as well as drawn.
Wayfinding5
Knowing where you are in something long, and getting somewhere else quickly.
A compact outline for long pages. It keeps the active section and reading progress visible without becoming another permanent sidebar.
07Command PaletteA search dialog over anything you can list, opened from a keyboard shortcut, with ranked matches and hidden keywords.
08Scroll to Top ButtonA floating way back after someone has moved down a long page or scroll area. It stays hidden near the top.
82PaginationPage numbers with gaps where the run is broken, as buttons or as your own links.
83Side PanelA pane that comes in from the side: an inspector, a filter set, a row's detail.
Docs5
The furniture of a documentation site, taken out of this one.
The install line for a library, switchable between package managers, with the runner and the installer kept apart.
11Copy for AIHands the page to an assistant as markdown, by clipboard, by link, or by opening it somewhere that can read it.
12Table of ContentsAn outline of the page that keeps up with the reader, marking the section they are in as they scroll.
47Component PreviewA framed example with a tab for the source beside it, and the live one still running when you switch back.
48KbdA keyboard chord rendered with the right glyphs for the reader's platform, and spoken in words.
Blocks11
Larger pieces that compose several components into one part of a page.
A complete closing section with room for the useful links first and one oversized wordmark at the end.
40Image GalleryA responsive image collection with equal and masonry layouts, plus a lightbox that handles focus, keyboard navigation, and scroll locking.
69Footer ColumnsLabelled columns of links, with the column count and the link rendering left to you.
70Footer RowA wrapping row of links under its own label, set apart by a dashed rule.
71Footer WordmarkThe oversized brand word that closes a page, drawn as texture rather than content.
74Image GridThumbnails in even cells or masonry columns, with nothing but React behind them.
75LightboxOne image at a time, full bleed, with the rest of the set a key away.
113Resizable PanelsTwo panels and something to drag between them, where the divider is a real separator that also works from the keyboard.
115Avatar StackOverlapping faces with a count for the rest, and the names underneath as a real list.
116TimelineThings that happened, in the order they happened, with the state of each one said aloud rather than left in a coloured dot.
117Data TableTyped rows with cells you write, column widths you set or the reader drags, sorting that is one property to switch on, and selection kept in keys rather than positions.
Scenes18
Backdrops and moments where the drawing is the job, each one taking its colours from the theme it was installed into.
The canvas the other scenes are drawn on. It stays the size of its box, sleeps when nobody is looking at it, and holds still when motion is reduced.
85Aurora FieldA drifting gradient backdrop for a hero or an empty state, built from the colours already in your theme rather than from a palette it brought with it.
86Grain OverlayFilm grain for any positioned box, which incidentally fixes the banding a wide gradient shows on a good monitor.
87Spotlight CardA card that catches a light following the pointer, and can light every card in its grid from the same pointer at once.
88Constellation FieldDrifting points joined by lines when they come close, brightening and swelling around the pointer.
89Lattice FieldA grid of dots that parts around the pointer and falls apart when pressed, then climbs back into line.
90BurstA short burst of pieces for the moment something finally completes. It draws nothing until it is fired and stops as soon as the last piece falls out of the box.
91Shader SurfaceFour shader backdrops -- caustics, metal, plasma and ripple -- each taking its two colours from your theme, so the same surface arrives dark in a dark application and light in a light one.
92Displacement ImageTwo images crossing by pushing their pixels through the same noise in opposite directions, with the first image also present as ordinary markup for anything that cannot run it.
93Scene HeroA lit three-dimensional object behind a headline, steered by the pointer and coloured by the theme. The one component here that asks for three.
94Scroll SceneTurns the scrolling of a tall element into a number between nought and one, published to a custom property and to a callback, without rendering the page to do it.
99Tilt CardA card that leans toward the pointer as though it were a physical object lying on the page.
100Connection BeamA line between two elements with something travelling along it, measured from the elements rather than given as coordinates.
101Cursor TrailA fading mark behind the pointer, drawn only inside its own box and only while the pointer is in it.
102MetaballsBlobs that swell into one another as they meet, taking their two colours from your theme.
103Dither ImageA photograph reduced to two theme colours through an ordered dither, the way a newspaper reduced one to ink and paper.
104ASCII ImageA photograph redrawn as characters. The grid is worked out once and kept, so each frame is a single copy rather than thousands of letters measured again.
105Wireframe GlobeA wireframe world with places marked on it, arcs between them, and the same places written out underneath as text.
Motion4
Entrances and numbers that move, driven by arrival or by scrolling, and never by withholding the content.
Moves its children in when they arrive on screen. It changes how something arrives and never whether it is there.
96Split TextA heading animated one character, word, or line at a time, and still announced as one sentence rather than as a pile of single letters.
97MarqueeA row that runs on its own, seamlessly, and turns back into an ordinary scrolling row for anyone who asked for less motion.
98Number TickerCounts to a number rather than replacing it, in whatever currency or format you asked for.