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 componentsCards & layout

Ticket Card

Boarding pass or event ticket with a coloured band and status chip, route or title, labelled fields with changed values, a masked perforated stub and a deterministic drawn barcode.

Preview

Northline Air · Boarding passGate changed
LisbonLIS07:45
3h 35m
CopenhagenCPH12:20

LIS to CPH

Passenger
Ines Alvarez
Flight
NL 2041
Date
Thu, Nov 20
Gate
was A7, now B14
Boarding
07:05
Seat
14C
Zone
2
Seat
14C
NL2041-14C-IA
Harbour Hall · LiveAdmit one

Late Signals, autumn tour

Date
Sat, Nov 29
Doors
19:30
Section
Floor
Entry
Gate C
HH-1129-F-0482
Riverside line · RailOn time

Porto → Coimbra

Departs
09:12
Arrives
10:05
Coach
4
Seat
62
RL-0912-4-62

Install

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

Props

PropTypeDefaultDescription
eyebrow / titlestring—Band text and the event name (names the ticket).
route{ from: { code; label?; time? }; to: {…}; duration? }—Travel layout with big codes and a flight line; names it A to B.
fields{ label; value; highlight?; previous? }[]—Labelled fields; previous shows a struck old value.
stub{ fields?; code }—Tear-off stub with fields and a barcode drawn from the code.
status{ label; tone?: "neutral" | "success" | "warning" | "danger" }—Status chip on the band.
orientation / tone"horizontal" | "vertical" / "accent" | "ink""horizontal" / "ink"Stub side and band colour.

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 ↗