---
name: "@creance"
slug: "creance"
description: "React components for supervising AI agents: approvals, tool calls, run timelines, diff review and handoffs. 109 components, light and dark."
category: "AI/chat UI"
tags: ["ai", "buttons", "cards", "charts", "dashboard", "editor", "forms", "icons", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "amitshrivastavaa"
website: "https://creance.pages.dev"
github: "https://github.com/amitshrivastavaa/creance"
registry: "https://creance.pages.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 112
generated_at: "2026-10-20T06:35:22.791Z"
---

# @creance

React components for supervising AI agents: approvals, tool calls, run timelines, diff review and handoffs. 109 components, light and dark.

## Links

- Website: https://creance.pages.dev
- GitHub: https://github.com/amitshrivastavaa/creance
- Registry JSON: https://creance.pages.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/creance
- This file: https://sh4dcn.vercel.app/md/creance.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://creance.pages.dev/r/registry.json
pnpm dlx shadcn@latest add https://creance.pages.dev/r/registry.json
bunx shadcn@latest add https://creance.pages.dev/r/registry.json
# clone the source repo
git clone https://github.com/amitshrivastavaa/creance.git
# fetch the raw registry index
curl -s https://creance.pages.dev/r/registry.json
```

## Components (112)

| name | type | description | install |
| --- | --- | --- | --- |
| avatar | registry:ui | Agents are rounded squares; people are circles. | `npx shadcn@latest add https://creance.pages.dev/r/avatar.json` |
| badge | registry:ui | A status as tone, icon and word. | `npx shadcn@latest add https://creance.pages.dev/r/badge.json` |
| button | registry:ui | A glass capsule. Blue is for the one primary action; red text marks refusal. | `npx shadcn@latest add https://creance.pages.dev/r/button.json` |
| checkbox | registry:ui | A native checkbox with its label. | `npx shadcn@latest add https://creance.pages.dev/r/checkbox.json` |
| code | registry:ui | Inline code, or a scrollable block. | `npx shadcn@latest add https://creance.pages.dev/r/code.json` |
| error-message | registry:ui | What went wrong and what to do next. | `npx shadcn@latest add https://creance.pages.dev/r/error-message.json` |
| gauge | registry:ui | A ring that fills to a percentage. Red only past a limit you set. | `npx shadcn@latest add https://creance.pages.dev/r/gauge.json` |
| icon-button | registry:ui | A button with only an icon. Its label is required and shows as a tooltip. | `npx shadcn@latest add https://creance.pages.dev/r/icon-button.json` |
| input | registry:ui | A text field. | `npx shadcn@latest add https://creance.pages.dev/r/input.json` |
| kbd | registry:ui | A keyboard key. | `npx shadcn@latest add https://creance.pages.dev/r/kbd.json` |
| loading-dots | registry:ui | Three dots beside what is happening. | `npx shadcn@latest add https://creance.pages.dev/r/loading-dots.json` |
| middle-truncate | registry:ui | Shortens the middle of a path or ID and keeps both ends. | `npx shadcn@latest add https://creance.pages.dev/r/middle-truncate.json` |
| progress-bar | registry:ui | Progress toward a known total. | `npx shadcn@latest add https://creance.pages.dev/r/progress-bar.json` |
| radio | registry:ui | A native radio with its label. | `npx shadcn@latest add https://creance.pages.dev/r/radio.json` |
| select | registry:ui | The native select, styled. The operating system draws the menu. | `npx shadcn@latest add https://creance.pages.dev/r/select.json` |
| separator | registry:ui | A hairline between groups. | `npx shadcn@latest add https://creance.pages.dev/r/separator.json` |
| skeleton | registry:ui | A placeholder while content loads. | `npx shadcn@latest add https://creance.pages.dev/r/skeleton.json` |
| sparkline | registry:ui | A trend with no axes, for a table cell or a stat card. | `npx shadcn@latest add https://creance.pages.dev/r/sparkline.json` |
| spinner | registry:ui | Something is happening, with no known end. | `npx shadcn@latest add https://creance.pages.dev/r/spinner.json` |
| status-dot | registry:ui | A small mark and a word. Each status has its own shape as well as tone. | `npx shadcn@latest add https://creance.pages.dev/r/status-dot.json` |
| switch | registry:ui | An on/off setting that applies immediately. | `npx shadcn@latest add https://creance.pages.dev/r/switch.json` |
| textarea | registry:ui | A multi-line text field. | `npx shadcn@latest add https://creance.pages.dev/r/textarea.json` |
| toggle | registry:ui | A button that stays on or off. | `npx shadcn@latest add https://creance.pages.dev/r/toggle.json` |
| tooltip | registry:ui | Extra text on hover and keyboard focus. | `npx shadcn@latest add https://creance.pages.dev/r/tooltip.json` |
| alert | registry:ui | A message in the page: what happened and what to do. | `npx shadcn@latest add https://creance.pages.dev/r/alert.json` |
| banner | registry:ui | A full-width notice in three tones. | `npx shadcn@latest add https://creance.pages.dev/r/banner.json` |
| bar-chart | registry:ui | Amounts across categories. More than one series stacks. | `npx shadcn@latest add https://creance.pages.dev/r/bar-chart.json` |
| bar-list | registry:ui | A ranking: a name, a bar and a value on every row. | `npx shadcn@latest add https://creance.pages.dev/r/bar-list.json` |
| breadcrumbs | registry:ui | Where you are. Long trails fold the middle. | `npx shadcn@latest add https://creance.pages.dev/r/breadcrumbs.json` |
| browser-frame | registry:ui | A browser window drawn around a preview. | `npx shadcn@latest add https://creance.pages.dev/r/browser-frame.json` |
| budget-meter | registry:ui | Spend against a limit. It warns at 80% and flags going over. | `npx shadcn@latest add https://creance.pages.dev/r/budget-meter.json` |
| calendar | registry:ui | A day or a range. Arrow keys move by day, Page Up and Down by month. | `npx shadcn@latest add https://creance.pages.dev/r/calendar.json` |
| card | registry:ui | A glass tile for grouping related content. | `npx shadcn@latest add https://creance.pages.dev/r/card.json` |
| choicebox | registry:ui | Card-sized options for a choice that needs a sentence each. | `npx shadcn@latest add https://creance.pages.dev/r/choicebox.json` |
| clearable-input | registry:ui | A text field with a clear button that puts focus back in the field. | `npx shadcn@latest add https://creance.pages.dev/r/clearable-input.json` |
| collapse | registry:ui | Sections that open and close. | `npx shadcn@latest add https://creance.pages.dev/r/collapse.json` |
| combobox | registry:ui | Type to filter and pick one. Arrow keys move, Enter picks, Escape closes. | `npx shadcn@latest add https://creance.pages.dev/r/combobox.json` |
| command-menu | registry:ui | Search everything and act from the keyboard. Press ⌘K or Ctrl+K to see it in use: the search on this site is a CommandMenu. | `npx shadcn@latest add https://creance.pages.dev/r/command-menu.json` |
| confidence-meter | registry:ui | How sure the agent is: a range in words with reasons, never a percentage. | `npx shadcn@latest add https://creance.pages.dev/r/confidence-meter.json` |
| context-card | registry:ui | A preview on hover or keyboard focus. Focus never moves into it. | `npx shadcn@latest add https://creance.pages.dev/r/context-card.json` |
| context-menu | registry:ui | Opens on right-click, long-press, or Shift+F10. | `npx shadcn@latest add https://creance.pages.dev/r/context-menu.json` |
| copy-button | registry:ui | Copies text, shows a check for two seconds, and tells screen readers. | `npx shadcn@latest add https://creance.pages.dev/r/copy-button.json` |
| description | registry:ui | Terms and their values. | `npx shadcn@latest add https://creance.pages.dev/r/description.json` |
| destructive-action-modal | registry:ui | For actions that cannot be undone. The red button stays off until the name is typed. | `npx shadcn@latest add https://creance.pages.dev/r/destructive-action-modal.json` |
| dialog | registry:ui | A question over a dimmed page. It traps focus and returns it when closed. | `npx shadcn@latest add https://creance.pages.dev/r/dialog.json` |
| diff-line | registry:ui | One line of a diff, with line numbers and screen-reader text. | `npx shadcn@latest add https://creance.pages.dev/r/diff-line.json` |
| donut-chart | registry:ui | Parts of a whole, with each slice’s value and share in the legend. | `npx shadcn@latest add https://creance.pages.dev/r/donut-chart.json` |
| dots-menu | registry:ui | A "…" button with secondary actions for one row. | `npx shadcn@latest add https://creance.pages.dev/r/dots-menu.json` |
| empty-state | registry:ui | An empty list as an invitation to act. | `npx shadcn@latest add https://creance.pages.dev/r/empty-state.json` |
| entity | registry:ui | An agent or a person as a row. | `npx shadcn@latest add https://creance.pages.dev/r/entity.json` |
| error-card | registry:ui | A failure that needs a decision: what broke, the error, and what you can do. | `npx shadcn@latest add https://creance.pages.dev/r/error-card.json` |
| feedback | registry:ui | Thumbs up or down, then an optional comment. | `npx shadcn@latest add https://creance.pages.dev/r/feedback.json` |
| field | registry:ui | A label, a control, and the hint or error that describes it, wired for screen readers. | `npx shadcn@latest add https://creance.pages.dev/r/field.json` |
| file-tree | registry:ui | Files and folders with change markers. Arrow keys walk the tree. | `npx shadcn@latest add https://creance.pages.dev/r/file-tree.json` |
| footer | registry:ui | The end of a page: brand, groups of links, and a line for copyright. | `npx shadcn@latest add https://creance.pages.dev/r/footer.json` |
| json-view | registry:ui | JSON as a tree you can fold. | `npx shadcn@latest add https://creance.pages.dev/r/json-view.json` |
| keyboard-hint | registry:ui | A shortcut and what it does. | `npx shadcn@latest add https://creance.pages.dev/r/keyboard-hint.json` |
| line-chart | registry:ui | A trend over time. Point at it, or focus it and press the arrow keys. | `npx shadcn@latest add https://creance.pages.dev/r/line-chart.json` |
| load-more-button | registry:ui | A full-width button under a list that says when it is loading. | `npx shadcn@latest add https://creance.pages.dev/r/load-more-button.json` |
| menu | registry:ui | Actions behind a button. Put destructive ones last, after a separator. | `npx shadcn@latest add https://creance.pages.dev/r/menu.json` |
| message | registry:ui | One turn. Yours sit right in a tile; the agent’s are plain text under its name. | `npx shadcn@latest add https://creance.pages.dev/r/message.json` |
| message-list | registry:ui | A scrolling column that follows new messages until you scroll up. | `npx shadcn@latest add https://creance.pages.dev/r/message-list.json` |
| model-picker | registry:ui | Chooses which model answers. | `npx shadcn@latest add https://creance.pages.dev/r/model-picker.json` |
| multi-select | registry:ui | Pick several. Picks become chips; Backspace removes the last one. | `npx shadcn@latest add https://creance.pages.dev/r/multi-select.json` |
| navbar | registry:ui | The bar across the top. When it gets narrow, the links move into a menu. | `npx shadcn@latest add https://creance.pages.dev/r/navbar.json` |
| pagination | registry:ui | Page numbers, or a compact previous and next. | `npx shadcn@latest add https://creance.pages.dev/r/pagination.json` |
| phone-frame | registry:ui | A phone drawn around content, to show a component at phone size. | `npx shadcn@latest add https://creance.pages.dev/r/phone-frame.json` |
| project-banner | registry:ui | A project-wide notice with one action. | `npx shadcn@latest add https://creance.pages.dev/r/project-banner.json` |
| prompt-input | registry:ui | Where you write to an agent. Enter sends; Send becomes Stop while it works. | `npx shadcn@latest add https://creance.pages.dev/r/prompt-input.json` |
| radio-group | registry:ui | One choice from a short list. | `npx shadcn@latest add https://creance.pages.dev/r/radio-group.json` |
| reasoning | registry:ui | The agent’s thinking, folded away behind how long it took. | `npx shadcn@latest add https://creance.pages.dev/r/reasoning.json` |
| relative-time-card | registry:ui | "2 hours ago", with the exact local and UTC time on hover or focus. | `npx shadcn@latest add https://creance.pages.dev/r/relative-time-card.json` |
| risk-label | registry:ui | How risky an action is, in words. | `npx shadcn@latest add https://creance.pages.dev/r/risk-label.json` |
| scroller | registry:ui | A horizontal strip that fades where there is more. | `npx shadcn@latest add https://creance.pages.dev/r/scroller.json` |
| search-input | registry:ui | A search field with a shortcut hint, a spinner and a clear button. | `npx shadcn@latest add https://creance.pages.dev/r/search-input.json` |
| sheet | registry:ui | A panel that slides in from an edge. | `npx shadcn@latest add https://creance.pages.dev/r/sheet.json` |
| show-more | registry:ui | Long content cut to a few lines, with a button to show the rest. | `npx shadcn@latest add https://creance.pages.dev/r/show-more.json` |
| sidebar | registry:ui | Links down the side, in groups. Collapses to icons that keep their names. | `npx shadcn@latest add https://creance.pages.dev/r/sidebar.json` |
| slider | registry:ui | One value, a range, or steps, read out in words. | `npx shadcn@latest add https://creance.pages.dev/r/slider.json` |
| snippet | registry:ui | Shell commands with a copy button. The prompt sign is never copied. | `npx shadcn@latest add https://creance.pages.dev/r/snippet.json` |
| sources | registry:ui | What an answer is based on, with numbered markers in the text. | `npx shadcn@latest add https://creance.pages.dev/r/sources.json` |
| split-button | registry:ui | The common action, with alternatives in a menu. | `npx shadcn@latest add https://creance.pages.dev/r/split-button.json` |
| stat-card | registry:ui | One number, what it is, and how it moved. | `npx shadcn@latest add https://creance.pages.dev/r/stat-card.json` |
| status-badge | registry:ui | A status with a running clock. | `npx shadcn@latest add https://creance.pages.dev/r/status-badge.json` |
| steps | registry:ui | Where someone is in a fixed sequence. Each status has a shape and a spoken label. | `npx shadcn@latest add https://creance.pages.dev/r/steps.json` |
| suggestions | registry:ui | Starting points above the input. Choosing one sends it. | `npx shadcn@latest add https://creance.pages.dev/r/suggestions.json` |
| table | registry:ui | Sortable columns, row selection with Shift-click ranges, and bulk actions. | `npx shadcn@latest add https://creance.pages.dev/r/table.json` |
| tabs | registry:ui | A segmented control and its panels. Arrow keys move between tabs. | `npx shadcn@latest add https://creance.pages.dev/r/tabs.json` |
| text-with-copy | registry:ui | Text with a copy button beside it. | `npx shadcn@latest add https://creance.pages.dev/r/text-with-copy.json` |
| theme-switcher | registry:ui | Light, dark or match the system. This one really switches this page, starting from its current theme. | `npx shadcn@latest add https://creance.pages.dev/r/theme-switcher.json` |
| toast | registry:ui | A short message that rises from the bottom. Call toast() from anywhere. | `npx shadcn@latest add https://creance.pages.dev/r/toast.json` |
| toggle-group | registry:ui | A segmented control: pick one, or any. | `npx shadcn@latest add https://creance.pages.dev/r/toggle-group.json` |
| tool-call-header | registry:ui | Names a tool call and shows its state and attempt. | `npx shadcn@latest add https://creance.pages.dev/r/tool-call-header.json` |
| video | registry:ui | A player with glass controls. It starts muted and never autoplays. | `npx shadcn@latest add https://creance.pages.dev/r/video.json` |
| agent-handoff-banner | registry:ui | The point where the agent hands control back: outcome, summary, next actions. | `npx shadcn@latest add https://creance.pages.dev/r/agent-handoff-banner.json` |
| approval-prompt | registry:ui | One specific action to allow or deny. A, Shift+A and D work while focus is inside it. | `npx shadcn@latest add https://creance.pages.dev/r/approval-prompt.json` |
| chat | registry:ui | A whole conversation with an agent: messages, suggestions and the input. Type something to try it. | `npx shadcn@latest add https://creance.pages.dev/r/chat.json` |
| checkpoint-rewind | registry:ui | Pick a point to roll back to and see what it undoes before confirming. | `npx shadcn@latest add https://creance.pages.dev/r/checkpoint-rewind.json` |
| diff-review | registry:ui | A decision per hunk before anything lands. J and K move, Y and N decide. | `npx shadcn@latest add https://creance.pages.dev/r/diff-review.json` |
| fleet-sky | registry:ui | Many agents at once, as birds on lines back to you. The one that needs you flies in on a taut line. | `npx shadcn@latest add https://creance.pages.dev/r/fleet-sky.json` |
| kill-switch | registry:ui | Hold for a second to stop the agent. Letting go early does nothing. Space or Enter held does the same. | `npx shadcn@latest add https://creance.pages.dev/r/kill-switch.json` |
| needs-you-inbox | registry:ui | Everything blocked on a person, across agents, most urgent first. | `npx shadcn@latest add https://creance.pages.dev/r/needs-you-inbox.json` |
| permission-ledger | registry:ui | Everything you said "Always allow" to, how often it has been used, and a way to take it back. | `npx shadcn@latest add https://creance.pages.dev/r/permission-ledger.json` |
| plan-editor | registry:ui | Reorder, edit, remove and add steps before anything runs. Alt+Up and Alt+Down move a step. | `npx shadcn@latest add https://creance.pages.dev/r/plan-editor.json` |
| question-card | registry:ui | When the agent needs information rather than permission. | `npx shadcn@latest add https://creance.pages.dev/r/question-card.json` |
| run-timeline | registry:ui | The run's steps and tool calls. It follows the newest step until you scroll up. | `npx shadcn@latest add https://creance.pages.dev/r/run-timeline.json` |
| tool-call-card | registry:ui | One tool call's whole life: input, result, errors and retries. | `npx shadcn@latest add https://creance.pages.dev/r/tool-call-card.json` |
| agent-run-layout | registry:ui | The run screen. It takes organisms as slots, so your app decides what goes where. | `npx shadcn@latest add https://creance.pages.dev/r/agent-run-layout.json` |
| app-shell | registry:ui | The frame of an app: sidebar, header, content and an optional aside. | `npx shadcn@latest add https://creance.pages.dev/r/app-shell.json` |
| creance-base | registry:lib | Shared helpers, base styles and the design tokens every Creance component uses. | `npx shadcn@latest add https://creance.pages.dev/r/creance-base.json` |
| creance-chart | registry:lib | Shared layout and styles for the chart components. | `npx shadcn@latest add https://creance.pages.dev/r/creance-chart.json` |
| agent-run | registry:lib | The agent event model, useAgentRun and its selectors: turn events from any agent into run state for the agent components. | `npx shadcn@latest add https://creance.pages.dev/r/agent-run.json` |

## For AI agents

```text
You are adding components from @creance to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/creance.md) for the component list.
2. Fetch the machine-readable index: https://creance.pages.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: creance).
```