Destination Carousel

Component 1

About

Destination Carousel This component displays a horizontally scrollable carousel of destination cards. It's designed to be easily populated with data and includes a title, a "view all" link, and interactive cards with hover and entrance animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Destination Carousel to your project and fits it to your theme.

Code

How Destination Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DestinationCarousel, Destination } from "@/components/ui/destination-carousel";

// Sample data for the demo
const popularDestinations: Destination[] = [
  {
    id: "prague",
    name: "Prague",
    country: "Czech Republic",
    imageUrl: "https://cdn.21st.dev/assets/mirror/bd/bdbc5dfa2ade28455611a759138daa80169e0f51e04bad5378f4466afa6ad756.jpg",
    avgTicketPrice: 53,
    currency: "EUR",
    isFavorite: true,
  },
  {
    id: "budapest",
    name: "Budapest",
    country: "Hungary",
    imageUrl: "https://cdn.21st.dev/assets/mirror/9e/9e0219f4f41b68a6969c3518384fb959d465ee7ce27f16535ffe62aede8556b7.jpg",
    avgTicketPrice: 44,
    currency: "EUR",
  },
  {
    id: "bratislava",
    name: "Bratislava",
    country: "Slovakia",
    imageUrl: "https://cdn.21st.dev/assets/mirror/21/210af8d2c0c3cc8d21eb57419a272915b3711ddcc80aba8de6eb81d0fe48ba5e.jpg",
    avgTicketPrice: 21,
    currency: "EUR",
  },
  {
    id: "rome",
    name: "Rome",
    country: "Italy",
    imageUrl: "https://cdn.21st.dev/assets/mirror/b6/b64588002496c04301678a76412a98f0c083ac80f91ce0230b22cc6d569c8b24.jpg",
    avgTicketPrice: 78,
    currency: "EUR",
    isFavorite: true,
  },
  {
    id: "paris",
    name: "Paris",
    country: "France",
    imageUrl: "https://cdn.21st.dev/assets/mirror/41/4177e680ea7f60649188ba91e1c9f2f4eaac3d531619b38c52b670465926a46d.jpg",
    avgTicketPrice: 85,
    currency: "EUR",
  },
];

/**
 * A demo page to showcase the DestinationCarousel component.
 */
const DestinationCarouselDemo = () => {
  return (
    <div className="w-full bg-background flex items-center justify-center py-10">
      <DestinationCarousel
        title="Popular from Vienna"
        destinations={popularDestinations}
      />
    </div>
  );
};

export default DestinationCarouselDemo;