Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsAI interfaces

Plan Card

An agent plan card with a step list, a draining auto-approve countdown that pauses on hover or focus and can be cancelled, and a lit Approve key with a Ctrl/⌘+Enter shortcut.

Preview

Plan·4 steps

Move invoice exports to the v2 API

Swap the nightly CSV job for the paged v2 endpoint and keep the old job behind a flag for one release.

  1. 1Read the current export jobjobs/export-invoices.ts
  2. 2Add a paged v2 clientlib/billing/v2-client.ts
  3. 3Gate the switch behind a flagflag: invoices_v2
  4. 4Run the export against stagingpnpm job:export --env staging

Approves in 15s

Hover or focus the card to pause

Plan·3 steps

Approved

Tidy onboarding copy

Shorten the welcome screens and match the new voice guide.

  1. 1Find strings over 80 characters
  2. 2Rewrite them in sentence case
  3. 3Open a draft for Priya to review

Approved · agent is running

Plan·3 steps

Needs review

Rebuild the docs search index

  1. 1Snapshot the current indexindex: docs-2026-10
  2. 2Build a fresh index from source
  3. 3Swap the alias, keep the old one for 24h

Auto-approve off

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
titlestring—Plan title; names the region.
descriptionstring—One or two sentences on what the plan achieves.
stepsPlanStep[]—Ordered steps { id, label, detail? }; detail renders in mono.
autoApproveAfternumber—Seconds until the plan approves itself; omit for no countdown.
status"pending" | "cancelled" | "approved"—Controlled status; pair with onStatusChange.
defaultStatus"pending" | "cancelled" | "approved""pending"Initial status when uncontrolled.
onStatusChange(status, source: "user" | "auto") => void—Called on every status change, with what changed it.
onApprove(source: "user" | "auto") => void—Called when the plan is approved by the user or the countdown.
onEdit() => void—Called by the Edit action; omit to hide Edit.
approveLabelstring"Approve"Label of the approve key.
editLabelstring"Edit"Label of the edit action.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗