Card

Buttons 58

About

Quick Links Card A card component that displays a title, subtitle, and a set of actionable icon buttons for quick access to common tasks.

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 {
  ArrowDownLeftFromSquare,
  ArrowUpRightFromSquare,
  ClipboardList,
} from 'lucide-react';

import { QuickLinksCard, ActionItem } from '@/components/ui/card-2';

/**
 * A demo component to showcase the QuickLinksCard.
 */
export default function QuickLinksCardDemo() {
  // Define the actions to be passed to the card component
  const quickLinks: ActionItem[] = [
    {
      icon: <ClipboardList className="h-full w-full" />,
      label: 'Request',
      onClick: () => alert('Request action triggered!'),
    },
    {
      icon: <ArrowUpRightFromSquare className="h-full w-full" />,
      label: 'Send',
      onClick: () => alert('Send action triggered!'),
    },
    {
      icon: <ArrowDownLeftFromSquare className="h-full w-full" />,
      label: 'Receive',
      onClick: () => alert('Receive action triggered!'),
    },
  ];

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <QuickLinksCard
        title="Quick Links"
        subtitle="Essential dues"
        actions={quickLinks}
      />
    </div>
  );
}