fetaUI
GitHub

Boarding Pass

A flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/boarding-pass
Playground
NorthwindNW 214
On time
LISLisbon · 10:40
CPH15:05 · Copenhagen
Gate
B12
Boards
10:05
Seat
14A
Group
2

Thu, 12 Nov · Doors close 15 min before departure

Passenger

Maya Chen

Thu, 12 Nov

On time
NorthwindNW 214
On time
LISLisbon · 10:40
CPH15:05 · Copenhagen
Gate
B12
Boards
10:05
Seat
14A
Group
2

Thu, 12 Nov · Doors close 15 min before departure

Passenger

Maya Chen

Thu, 12 Nov

Gate change
NorthwindNW 214
Gate change
LISLisbon · 10:40
CPH15:05 · Copenhagen
Gate
B31
Boards
10:05
Seat
14A
Group
2

Gate moved to B31, 6 min walk from security

Passenger

Maya Chen

Thu, 12 Nov

Delayed
NorthwindNW 214
Delayed 25 min
LISLisbon · 11:05
CPH15:30 · Copenhagen
Gate
B12
Boards
10:30
Seat
14A
Group
2

Late inbound aircraft · new boarding 10:30

Passenger

Maya Chen

Thu, 12 Nov

Boarding
NorthwindNW 214
Boarding
LISLisbon · 10:40
CPH15:05 · Copenhagen
Gate
B12
Boards
10:05
Seat
14A
Group
2

Group 2 is boarding now at gate B12

Passenger

Maya Chen

Thu, 12 Nov

Status
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/boarding-pass

Accessibility

  • All fields stay as text in a description list.
  • The barcode is decorative and hidden from screen readers.
  • A status change is announced politely.
  • Delayed times carry the Badge and the note, not only the danger colour.

Motion

  • The status Badge pops in on change in 240 ms.
  • The changed field fades its chip in, and the old value crossfades out.
  • With reduced motion, values swap in place.

Responsive behavior

  • 384 px on Web and 358 px on Mobile. The height stays 330 px.
  • The barcode gives up width first on narrow screens.
  • The notches are real cut outs, so the pass sits on any surface.

Performance

  • The barcode bars are computed once per flight and seat with useMemo.
  • A new status swaps only the values that change, and each crossfades in place.
  • The barcode is one SVG, hidden from screen readers.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import BoardingPass from @/components/fetaui/boarding-pass. Without flight it shows sample data.
  • status updates in place. Use patches to replace what a status changes, like label, note, gate or changed.
  • Sample patches apply only to the sample flight. With your own flight a status changes the Badge and chip, so pass patches for the new values.
  • The barcode is drawn from a seed and cannot be scanned. Composes Card and Badge.
/docs/components/boarding-pass/markdown
PreviousActivity Rings
NextCard Flip

Related

Card FlipComponentA ticket that turns in 3D. Both sides are the same size, and a shade peaks halfway round.Currency TransferComponentA money transfer and its steps: recipient, amount, and a timeline that ticks in sequence.Receipt PrinterComponentA receipt that feeds out of a slot line by line, hangs, and tears off on a pull.Order TrackingComponentStage and ETA, a five stage track, a timeline of updates, the items and the address.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.