# Detent

> Well-made React components for your product. Installed with shadcn, styled by your theme, yours to change. 18 of 37 are free.

Detent is a library of premium React components for products and websites: everyday controls, live charts, whole-screen blocks and app templates, each with its motion and states worked out. They install with the shadcn CLI as source you own. Built with React 19, Tailwind CSS v4, and Motion. Free components are open-source under the MIT license; Pro is a one-time purchase with every update for life. Contact: hello@detentui.com.

## Core pages
- [Home](https://detentui.com/index.md): Detent — Make your product feel expensive.
- [Pro](https://detentui.com/pro.md): Pro components, whole-screen blocks, and production templates with lifetime updates
- [Components](https://detentui.com/components.md): All 37 premium React components
- [Blocks](https://detentui.com/blocks.md): Production-ready screens built from Detent components
- [Templates](https://detentui.com/templates.md): Full landing pages and applications ready to clone

## Docs & Guides
- [Get started](https://detentui.com/docs.md): Set up a project, install a first component, connect Pro, and hand it to a coding agent
- [Design System](https://detentui.com/system.md): Tokens, typography, layout principles, and styling rules

## Free components
- [Diff review](https://detentui.com/components/diff.md): Code an agent wants to change, reviewed hunk by hunk. Lines stream in, verdicts stamp down, and unified slides into split. `npx shadcn add https://detentui.com/r/diff`
- [Rewrite](https://detentui.com/components/rewrite.md): Select a phrase, say how it should read, and watch it rewritten in place like a tracked change. Tab takes it. `npx shadcn add https://detentui.com/r/rewrite`
- [Prompt box](https://detentui.com/components/prompt.md): 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. `npx shadcn add https://detentui.com/r/prompt`
- [Model & effort](https://detentui.com/components/models.md): 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. `npx shadcn add https://detentui.com/r/models`
- [Baseline chart](https://detentui.com/components/chart.md): 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. `npx shadcn add https://detentui.com/r/chart`
- [Upload](https://detentui.com/components/upload.md): Files hovering tip the folder open; dropped files fall in as sheets. `npx shadcn add https://detentui.com/r/upload`
- [Outlook chart](https://detentui.com/components/trend.md): 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. `npx shadcn add https://detentui.com/r/trend`
- [Goal numerals](https://detentui.com/components/rings.md): 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. `npx shadcn add https://detentui.com/r/rings`
- [Metric explainer](https://detentui.com/components/metric.md): 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. `npx shadcn add https://detentui.com/r/metric`
- [Voice note](https://detentui.com/components/voicenote.md): 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. `npx shadcn add https://detentui.com/r/voicenote`
- [Halo bands](https://detentui.com/components/halo.md): Colour restarts at every curved edge, so one glow reads as glass. It follows your pointer. `npx shadcn add https://detentui.com/r/halo`
- [Rewind](https://detentui.com/components/rewind.md): 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. `npx shadcn add https://detentui.com/r/rewind`
- [Popup](https://detentui.com/components/popup.md): 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. `npx shadcn add https://detentui.com/r/popup`
- [Phrase](https://detentui.com/components/phrase.md): 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. `npx shadcn add https://detentui.com/r/phrase`
- [Announcement pill](https://detentui.com/components/announce.md): 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. `npx shadcn add https://detentui.com/r/announce`
- [Slice text](https://detentui.com/components/slices.md): Strips fly in from both sides and align into letters. Move over it and it cuts apart around the pointer. `npx shadcn add https://detentui.com/r/slices`
- [Shift](https://detentui.com/components/shift.md): 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. `npx shadcn add https://detentui.com/r/shift`
- [Live list](https://detentui.com/components/livelist.md): 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. `npx shadcn add https://detentui.com/r/livelist`

## Pro components
- [Run waterfall](https://detentui.com/components/trace.md): 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. `npx shadcn add @detent-pro/trace`
- [Ask filter](https://detentui.com/components/filter.md): 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. `npx shadcn add @detent-pro/filter`
- [Matchup](https://detentui.com/components/radar.md): 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. `npx shadcn add @detent-pro/radar`
- [Lasso scatter](https://detentui.com/components/scatter.md): 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. `npx shadcn add @detent-pro/scatter`
- [Dot histogram](https://detentui.com/components/histogram.md): 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. `npx shadcn add @detent-pro/histogram`
- [Flow funnel](https://detentui.com/components/funnel.md): 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. `npx shadcn add @detent-pro/funnel`
- [Revenue bridge](https://detentui.com/components/bridge.md): 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. `npx shadcn add @detent-pro/bridge`
- [Ask your data](https://detentui.com/components/askchart.md): 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. `npx shadcn add @detent-pro/askchart`
- [Period picker](https://detentui.com/components/dates.md): 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. `npx shadcn add @detent-pro/dates`
- [Extraction review](https://detentui.com/components/extract.md): 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. `npx shadcn add @detent-pro/extract`
- [Cash forecast](https://detentui.com/components/forecast.md): 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. `npx shadcn add @detent-pro/forecast`
- [Lit find](https://detentui.com/components/find.md): 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. `npx shadcn add @detent-pro/find`
- [Region wheel](https://detentui.com/components/region.md): 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. `npx shadcn add @detent-pro/region`
- [Thread hero](https://detentui.com/components/threads.md): 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. `npx shadcn add @detent-pro/threads`
- [Glyph art](https://detentui.com/components/glyph.md): 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. `npx shadcn add @detent-pro/glyph`
- [Hello globe](https://detentui.com/components/hello.md): 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. `npx shadcn add @detent-pro/hello`
- [Agent canvas](https://detentui.com/components/agent-canvas.md): 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. `npx shadcn add @detent-pro/agent-canvas`
- [Emoji picker](https://detentui.com/components/emoji.md): 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. `npx shadcn add @detent-pro/emoji`
- [MCP install](https://detentui.com/components/mcp.md): 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. `npx shadcn add @detent-pro/mcp`

## Blocks
- [Live features](https://detentui.com/blocks/live-features.md): The features section of an AI product’s landing page: a heading and five tiles, each one the feature working rather than a picture of it. `npx shadcn add @detent-pro/live-features`
- [Metered pricing](https://detentui.com/blocks/pricing.md): Usage-based pricing that opens with one big sentence: type or drag your volume and every price runs with your hand, on real wheels, with a notch wherever the best plan changes. Three plan cards sit under it, priced at that volume, with the recommended one printed in grain ink. `npx shadcn add @detent-pro/pricing`
- [Integrations](https://detentui.com/blocks/integrations.md): The tools a product connects to, drifting in rows under a capsule of glass that shows each in its own colour. Press one and the glass opens into a panel to connect it; connected tools keep their colour, so the rows fill in as the stack comes together. `npx shadcn add https://detentui.com/r/integrations`
- [Testimonials](https://detentui.com/blocks/testimonials.md): Testimonials with receipts: one customer at a time writes their quote in, with the number that moved beside it, over a wall of short quotes that each carry a result. `npx shadcn add https://detentui.com/r/testimonials`
- [FAQ](https://detentui.com/blocks/faq.md): The questions people ask before they start: search as you type with matches marked in place, topics, answers that open without moving the page, and a person to ask when it isn’t there. `npx shadcn add https://detentui.com/r/faq`
- [Call to action](https://detentui.com/blocks/cta.md): The closing call to action: one line to want it, an email to start with, and the queue it promises to clear, resolving beside it. `npx shadcn add https://detentui.com/r/cta`
- [Calendar](https://detentui.com/blocks/calendar.md): A week calendar with an assistant that finds the time. Ask for “45 minutes with Maya and Jonas before the weekend” and it works out when you’re all free, offers the best few, and books the one you pick. `npx shadcn add @detent-pro/calendar`
- [Data table](https://detentui.com/blocks/data-table.md): A table you can ask. Say what you’re after in plain words and it becomes filters you can see and take apart, with views, sorting, paging, bulk actions and a summary of any row. `npx shadcn add @detent-pro/data-table`
- [Agent chat](https://detentui.com/blocks/agent-chat.md): A real AI SDK conversation: the answer thinks, reads and streams, the run draws itself beside it, and anything that needs a person waits for a yes where you were typing. `npx shadcn add @detent-pro/agent-chat`
- [Task to merge](https://detentui.com/blocks/task-to-merge.md): A task from plan to merged pull request, laid out like an issue your team already uses: the request, the activity as it happens, one approval, the checks and Merge. `npx shadcn add @detent-pro/task-to-merge`
- [Voice mode](https://detentui.com/blocks/voice-mode.md): A voice call that writes its own notes. As you talk, the page beside it fills in: notes as they’re said, to-dos with an owner and a date, and the ones the assistant does itself ticked off, with Undo. `npx shadcn add @detent-pro/voice-mode`
- [Evals](https://detentui.com/blocks/evals.md): A candidate prompt against the one in production, case by case, before it ships. Regressions open side by side, and shipping waits for a person to decide each one. `npx shadcn add @detent-pro/evals`
- [Support inbox](https://detentui.com/blocks/support-inbox.md): A support inbox the AI has already been through. Everything sorted, replies drafted with their sources, and nothing in the list ever moves. `npx shadcn add @detent-pro/support-inbox`
- [Onboarding](https://detentui.com/blocks/onboarding.md): A new workspace in four steps, each leaving something real behind: tools connected, the team invited, a first agent created and watched doing its first job. `npx shadcn add @detent-pro/onboarding`
- [Sign in](https://detentui.com/blocks/sign-in.md): Google or GitHub in one press, or a code by email. Then pick a workspace and you’re in. `npx shadcn add https://detentui.com/r/sign-in`
- [Settings](https://detentui.com/blocks/settings.md): A whole settings area where every page is real: API keys with spend this month, members with roles, the workspace, and security with a careful danger zone. `npx shadcn add @detent-pro/settings`
- [Code review](https://detentui.com/blocks/code-review.md): A pull request where the agent answers your comments with a change you can apply in one press. `npx shadcn add @detent-pro/code-review`

## Templates
- [Detent](https://detentui.com/templates/detent.md) (app, Agent workspace): The app for an AI agent that works across your tools: sessions down the side, a thread that shows its work as it goes, and a composer that takes photos, files, tools and skills, queues what you ask while it answers, and sets how hard it thinks on a ramp of dots. `npx shadcn add @detent-pro/template-detent`

## Machine-readable
- [Full content](https://detentui.com/llms-full.txt): Every page concatenated in a single text document
- [Markdown catalog](https://detentui.com/api/md/_catalog): JSON catalog of all addressable markdown routes
- [Sitemap](https://detentui.com/sitemap.xml): XML sitemap listing all canonical HTML pages
- [AI usage policy](https://detentui.com/ai.txt): Permissions, restrictions, and attribution policy for AI crawlers
- [Theme tokens](https://detentui.com/r/theme.json): Design tokens and Tailwind configuration
- [Registry index](https://detentui.com/r/registry.json): CLI registry index for all components

## Optional
- [Changelog](https://detentui.com/changelog.md): Release history, component updates, and new features
- [Licence](https://detentui.com/licence.md): MIT and Pro license terms
- [Terms](https://detentui.com/terms.md): Terms of service
- [Refunds](https://detentui.com/refunds.md): 14-day refund policy
- [Privacy](https://detentui.com/privacy.md): What we keep and how to have it removed