Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Product Card Flight
Flight booking card with route display, flight times, layover info, and fare classes for React travel apps
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Book flights on your Next.js travel platform with this product card component. Features departure/arrival cities with airport codes, flight duration and stops, airline logo, fare class selector with baggage info, and book button. Built with shadcn/ui Card, Button, Badge, and RadioGroup components using Tailwind CSS. The flight-focused design simplifies booking—perfect for Shopify headless travel agencies, airline sites, or any React app with flight reservations. Clear and efficient.
Product Card
United Airlines
UA 1542 • Boeing 737 MAX
8:30 AM
SFO
San Francisco
5:15 PM
JFK
New York
Total per person
$249
Installation
Related blocks you will also like
React Product Card Simple
Vertical product card
React Product Card Travel
Travel package card
React Product Card Hotel
Hotel booking card
React Product Card Car Rental
Vehicle rental card
React Product Card Concert
Ticket tier selection
React Product Card Grid
Product grid layout