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 componentsApp shells & pages

Approvals Page

An approvals queue for spend, access and time-off requests with policy chips, approve or deny with an optional note, a bulk bar, a detail panel with history and type and status filters.

Preview

Approvals

4 waiting · 1 overdue

  • €1,240

    ASAna SousaResearch3d · overdue

    • Within team budget
    • Over €1,000 · 2 approvers
  • JPJun ParkFinanceAdmin · Billing1d

    • Time-limited: 14 days
    • 2-step enabled
  • SOSara OkaforDesign12–16 May · 5 daystoday

    • 18 days left
    • Overlaps with Leo
  • €380

    LVLeo VargaResearchtoday

    • Within team budget

Research conference tickets (×3)

Spend request

Requester
Ana Sousa · Research
Amount
€1,240
Status
pending
Three of us to Fieldwork Summit in March. Early-bird pricing ends on 15 January.

Policy checks

  • Within team budget
  • Over €1,000 · 2 approvers

History

  1. Ana Sousa submitted the requestOct 31
  2. Theo Osei approved as first approverNov 1

Install

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

Props

PropTypeDefaultDescription
defaultRequestsApprovalRequest[]—Requests { id, type: spend | access | timeoff, title, requester, amount?, currency?, scope?, dates?, reason?, policies?, ageDays, status, history? }.
approverstring—Signed-in approver, used in history.
onDecision(ids, status, note?) => void—Called after approving or denying (single or bulk).
slaDaysnumber2Days before a pending request shows as overdue.
defaultOpenIdstring—Request whose detail panel starts open.
titleReactNode"Approvals"Page heading.
heightnumber620Frame height in px.

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 ↗