Card

Cards 331

About

Place Card A visually polished card component for displaying travel destinations or listings. It includes an image carousel, rating, tags, and booking information, with smooth animations powered by framer-motion.

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

Code

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

Usage.tsx

import { PlaceCard } from '@/components/ui/card-22';

// Sample data to be passed as props
const demoPlaceData = {
  images: [
    'https://cdn.21st.dev/assets/mirror/f9/f9bd6cdfd8520519e33fc9badb63fb503ab2cd47cef4ef20a34d76ef7b62cb57.jpg',
    'https://images.unsplash.com/photo-1596622247990-84877175438a?q=80&w=2864&auto=format&fit=crop',
    'https://cdn.21st.dev/assets/mirror/d7/d7d67b06cfc140bab744419535e31829514e5bbc88d0994edcca161cbfbe8b29.jpg',
  ],
  tags: ['Adventure', 'Ancient Monuments'],
  rating: 4.8,
  title: 'Petra, Jordan',
  dateRange: 'May 1 - 6',
  hostType: 'Business host',
  isTopRated: true,
  description: 'A lost city carved in rose-colored stone, hidden in majestic desert canyons.',
  pricePerNight: 139,
};

const PlaceCardDemo = () => {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <PlaceCard
        images={demoPlaceData.images}
        tags={demoPlaceData.tags}
        rating={demoPlaceData.rating}
        title={demoPlaceData.title}
        dateRange={demoPlaceData.dateRange}
        hostType={demoPlaceData.hostType}
        isTopRated={demoPlaceData.isTopRated}
        description={demoPlaceData.description}
        pricePerNight={demoPlaceData.pricePerNight}
      />
    </div>
  );
};

export default PlaceCardDemo;