Creance

Overview

Creance is an MIT-licensed React component library in a frosted-glass style, with 109 components in light, dark and solid themes. Alongside the general set an app needs, such as forms, navigation, overlays, tables and charts, it includes components for supervising AI agents: approving actions, watching runs, reviewing diffs and taking back control.

It installs either as npm packages (@creance-ui/react and @creance-ui/tokens) or as source through the shadcn registry, which copies components into components/creance/ and tokens into lib/creance/. An example app connects the kit to a real model through the Vercel AI SDK, and every component runs live on the site with editable code.

Features

• Approval prompts: ApprovalPrompt asks about one specific action, and high-risk actions cannot be set to always allow.
• Run visibility: RunTimeline and ToolCallCard show every tool call, its input, errors and retries.
• Diff review: DiffReview takes a decision per hunk by mouse or keyboard.
• Control: KillSwitch stops an agent on a one-second hold, and CheckpointRewind previews what a rollback undoes.
• Planning and questions: PlanEditor reorders and edits steps, QuestionCard gathers information, and ConfidenceMeter explains certainty in words.
• Oversight across agents: NeedsYouInbox, FleetSky and PermissionLedger track blocked work, many agents and standing permissions.
• Token theming: Every color, radius, shadow, font and glass opacity is a --cr-* CSS variable, and glass turns solid for reduced transparency.

Tech stack

• React 18+
• Radix UI primitives
• CSS design tokens
• Vercel AI SDK (example app), Storybook

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @creance/component-name