React Travel Passport
An open-source React component for turning travel history into an interactive 3D passport, complete with country covers, entry and exit stamps, identity pages, and visa stickers.
Overview
React Travel Passport is an open-source component for presenting travel history as a tactile, animated passport book. It was inspired by the Vercel Passport and turns structured travel data into a 3D page-flipping experience that feels playful, familiar, and personal.
The component generates the cover, identity page, stamp pages, visa pages, and back cover from a small set of React props. It can be used as a complete passport or broken down into standalone stamps and visa stickers.
Key Features
Passport Covers
- More than 25 country presets plus a neutral Citizen of the World cover
- Fully customisable colours, typography, labels, and emblems
- Generic line-art artwork rather than official government insignia
Travel Details
- Five entry and exit stamp shapes with textured ink
- Deterministic placement, colour, and rotation for stable renders
- Full-page visa stickers with foil seals, machine-readable zones, and hover effects
- Automatic pagination for identity, stamp, and visa pages
Interaction & Accessibility
- Pure CSS 3D page-flip animation
- Arrow, dot, keyboard, and direct page navigation
- Screen-reader labels and reduced-motion support
- Zero runtime dependencies
Technical Implementation
The package is built with React and TypeScript and ships ESM, CommonJS, type declarations, and a standalone stylesheet. The animation and visual effects are handled in CSS, keeping the component lightweight and avoiding animation-framework or utility-CSS dependencies.
The live Vite demo doubles as interactive documentation, with cover presets, code samples, prop references, and standalone component examples.
Open Source
React Travel Passport is available on GitHub and npm under the MIT licence, ready to install with
npm install react-travel-passport