# Detent component library

> 37 premium React components: agents, data, inputs and more. 18 free under MIT.

Canonical: https://detentui.com/components
Last updated: 2026-11-10

## Agents components

- [Run waterfall](https://detentui.com/components/trace) — An agent run told two ways at once: one bar of where the time went, then every step as a plain sentence on its own time track. A step waiting on you lifts out with Approve in it.
- [Diff review](https://detentui.com/components/diff) — Code an agent wants to change, reviewed hunk by hunk. Lines stream in, verdicts stamp down, and unified slides into split.
- [Rewrite](https://detentui.com/components/rewrite) — Select a phrase, say how it should read, and watch it rewritten in place like a tracked change. Tab takes it.
- [Prompt box](https://detentui.com/components/prompt) — A white card on a quiet tray, round keys, and one dark key that speaks or sends. While it answers, the tray slides out from under the card and says what it’s doing.
- [Model & effort](https://detentui.com/components/models) — Pick a model and how hard it thinks. Effort is a real detent you drag and flick, with the time and cost of every model running with your finger, so you feel what thinking harder costs before you choose.
- [Extraction review](https://detentui.com/components/extract) — Check what an AI read from a document before it’s saved. Point at a field and a thread runs to where it came from; what it isn’t sure of comes first, one at a time.
- [Voice note](https://detentui.com/components/voicenote) — A voice reply with a waveform of dots that inks in as it plays, a speed that steps to 2×, and a transcript that follows the voice word by word.
- [Agent canvas](https://detentui.com/components/agent-canvas) — Your product, working inside Claude, ChatGPT or Grok. Someone says what should happen, the agent checks off its work in the chat, and the result writes itself on a canvas beside it: the rule, the Linear issue it will open and the Slack post it will send.
- [MCP install](https://detentui.com/components/mcp) — The page every company with an MCP server needs. Pick an editor and the exact config for it appears, choose remote or local and this project or everywhere, then copy: the card lights up in that editor's colour and waits until it connects.

## Data components

- [Ask filter](https://detentui.com/components/filter) — Type what you want to see in plain words. Each phrase hangs its filter on a thread, and when a word could mean two things, it asks.
- [Matchup](https://detentui.com/components/radar) — Two things compared in a sentence and drawn as one shape: each side of it wears the colour of whoever leads there, and the bigger the petal, the bigger the lead.
- [Lasso scatter](https://detentui.com/components/scatter) — Every request a dot. Draw a lasso round any cluster and the headline says what it is: how many, their averages, and the group most belong to.
- [Dot histogram](https://detentui.com/components/histogram) — A distribution stacked from dots, each one a fixed number of readings. Drag or flick the target pin and everything past it turns rose, catching on each column.
- [Flow funnel](https://detentui.com/components/funnel) — The funnel as one smooth shape. Pull any step wider to try a better conversion, and the headline says how many more customers that’s worth. It catches at the real rate, so you can feel your way back.
- [Revenue bridge](https://detentui.com/components/bridge) — A waterfall you pour with your hand. Drag across the steps and the running total rolls on real wheels while each bar fills as the value reaches it.
- [Ask your data](https://detentui.com/components/askchart) — Ask a question and get one line that answers it over a chart with one series in colour. Ask a follow-up and the same chart reshapes instead of starting over.
- [Baseline chart](https://detentui.com/components/chart) — A metric against any day you choose. Click the line and that day becomes the level: above it prints blue, below it red, and the sentence reads again from there.
- [Outlook chart](https://detentui.com/components/trend) — What happened is a line. What might happen is a band of ink that widens and thins as it runs out, so the part you can trust is the part that looks solid.
- [Goal numerals](https://detentui.com/components/rings) — Each goal as a soft bar with its percentage set large on top. Flick through the month and every bar and number moves as one. At 100% a bar holds under your hand, then breaks through amber.
- [Metric explainer](https://detentui.com/components/metric) — A metric that explains itself: the number, the change in words, the AI’s reading of why it moved, and the drivers behind it ranked by how much each one counted.
- [Cash forecast](https://detentui.com/components/forecast) — Runway on a lit panel. Ask a what-if in plain words and the forecast bends away from the plan; switch to Range and the line becomes a swarm of likely futures, and the runway a range.
- [Shift](https://detentui.com/components/shift) — One card for where your visitors come from, three ways to read it. Switch between List, Bars and Change and every bar, icon and number moves to its new place instead of redrawing, so you never lose the source you were looking at.

## Inputs components

- [Period picker](https://detentui.com/components/dates) — A date range picked the quick way first: type “since sep 3” or take a period, with its dates shown. The calendar is one step further for exact days. Compare it with the period before, apply.
- [Upload](https://detentui.com/components/upload) — Files hovering tip the folder open; dropped files fall in as sheets.
- [Rewind](https://detentui.com/components/rewind) — A textarea you can rewind. Hold undo and drag, and your writing runs back under your hand, with the words you deleted coming back in colour.
- [Popup](https://detentui.com/components/popup) — A popup that opens around your finger. The current choice stays where you pressed it, so you slide to the next one and let go.
- [Phrase](https://detentui.com/components/phrase) — Settings written as one sentence. Only the words you can change are dark: tap a word to pick another, drag a number sideways to dial it, and the line under it says what your choice means.
- [Region wheel](https://detentui.com/components/region) — A drum of server regions you can flick. The Earth turns with it, in the sunlight falling on it right now, with a route from your visitor to the region and the latency beside it.
- [Hello globe](https://detentui.com/components/hello) — A language picker with the world under it, drawn in the letters each place writes in. Pick a language and the globe turns there, and its country lights up in orange, spelling the greeting.
- [Emoji picker](https://detentui.com/components/emoji) — Emoji and symbols laid out as one round field instead of a grid. Fling it and it keeps gliding, the ones in the middle swell under your finger, and a tap sends the emoji flying into the message where your caret is.
- [Live list](https://detentui.com/components/livelist) — A checklist your whole team writes in at once. New items arrive in their group with the name of whoever added them, ticked ones settle into Done, and the card never changes height while it happens.

## Marketing components

- [Halo bands](https://detentui.com/components/halo) — Colour restarts at every curved edge, so one glow reads as glass. It follows your pointer.
- [Announcement pill](https://detentui.com/components/announce) — The pill above a headline. A line of light runs round it once as you reach for it, and the tag says what pressing it will do.
- [Slice text](https://detentui.com/components/slices) — Strips fly in from both sides and align into letters. Move over it and it cuts apart around the pointer.
- [Thread hero](https://detentui.com/components/threads) — Hairline threads sweep in from both edges and gather through your call to action. They tighten as you come near, part around your hand, and a press sends light out along every one.
- [Glyph art](https://detentui.com/components/glyph) — Hand it an SVG icon or a word and it draws it in shimmering characters, lit from the top left. Switch the shape and the characters re-form into the new one. Move over it and they light up; press for a ripple.

## Essentials components

- [Lit find](https://detentui.com/components/find) — Find in a page, by light. Everything dims except what you searched for and the sentence it sits in, and one plate carries you through every match.

## Related
- [Blocks](https://detentui.com/blocks)
- [Templates](https://detentui.com/templates)