Card

Cards 96

About

Travel Route Card A visually engaging card component to display travel route information with a like interaction. It uses framer-motion for smooth, staggered entrance animations and interactive feedback on hover and click.

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

// demo.tsx

import React from 'react';
import { TravelRouteCard } from '@/components/ui/card-7';

const TravelRouteCardDemo = () => {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <TravelRouteCard
        title="Rute dalam kota sekalian wisata"
        author="By Pak Eko"
        distance="12K"
        initialLikes={1527}
        imageUrl="https://cdn.21st.dev/assets/mirror/ad/ad826b9a6714a4a22f0cee591e20c764d475dc3b3af3bda1d24e8356cb35a08a.jpg"
        className="font-sans"
      />
    </div>
  );
};

export default TravelRouteCardDemo;