Item Card

Buttons 150

About

Order Item Card A visually polished card component for displaying an order item, featuring interactive controls and smooth animations powered by Framer Motion. It's designed to be easily customizable through props.

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

Code

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

Usage.tsx

import { OrderItemCard } from '@/components/ui/item-card'; // Adjust the import path

export default function OrderItemCardDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <OrderItemCard
        title="Cafe Latte"
        details={['Large', '2% Milk']}
        imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-7k0RkYcIaUhZwlMxeG3wJzvq00QH95.png&w=320&q=75"
        imageAlt="A cup of cafe latte with latte art"
        initialQuantity={1}
        initialShots={3}
        onQuantityChange={(quantity) => console.log('New quantity:', quantity)}
      />
    </div>
  );
}