List

Cards 36

About

Activity List The ActivityList component is designed to display a feed of recent transactions or activities. It features a clean, card-based layout with animated list items that gracefully fade in. The component is fully responsive and uses shadcn theme variables for seamless integration into light and dark modes.

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

Code

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

Usage.tsx

// demo.tsx

import { ActivityList, type ActivityItem } from '@/components/ui/list'; // Adjust path as needed

// --- MOCK DATA ---
const activities: ActivityItem[] = [
  {
    id: 1,
    name: 'Samantha',
    description: 'Ngopi Sore',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg',
    amount: 35000,
    date: 'Sep 25, 2024',
    currency: 'IDR',
  },
  {
    id: 2,
    name: 'Karen William',
    description: 'Makan Bareng',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg',
    amount: 125800,
    date: 'Sep 25, 2024',
    currency: 'IDR',
  },
  {
    id: 3,
    name: 'Angela Smith',
    description: 'Tiket Kereta',
    avatarUrl: 'https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg',
    amount: -67500,
    date: 'Sep 25, 2024',
    currency: 'IDR',
  },
];

// --- DEMO COMPONENT ---
const ActivityListDemo = () => {
  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <ActivityList title="Recent Activity" items={activities} />
    </div>
  );
};

export default ActivityListDemo;