Loyalty Status

Frequent-flyer card in a warm gradient, showing tier, miles, a progress track, and miles to next tier.

Miles & SmilesElite Gold

42,180miles

7,820 miles to Elite Platinum

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Travel16 } from "@/components/beste/piece/travel16";

<Travel16
  program="Miles & Smiles"
  tier="Elite Gold"
  miles="42,180"
  milesLabel="miles"
  milesToNext="7,820 miles to Elite Platinum"
  progress={84}
  tone="neutral"
/>