Recipe Card

Cards 1

About

Recipe Card A visually appealing card component to display recipe details including an image, title, description, ingredients, and key stats like cook time, servings, and calories. It's fully responsive and animated.

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

Code

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

Usage.tsx

import { RecipeCard } from "@/components/ui/recipe-card"; // Adjust the import path

export default function RecipeCardDemo() {
  const recipeData = {
    title: "Cherry Tomato And Salad Mix Bowl",
    description: "A refreshing and vibrant Cherry Tomato and Salad Mix Bowl, perfect for a light meal or side dish!",
    ingredients: ["Cherry tomato", "Olive oil", "Lemon juice", "Salt", "Black pepper"],
    imageUrl: "https://cdn.21st.dev/assets/mirror/ca/ca92b06090038c890c762d7205a7a38f362f652cf32c0aaaf5574da4d4093729.jpg",
    cookTime: "10min",
    servings: 2,
    calories: 150,
  };

  return (
    <div className="flex items-center justify-center p-4 bg-background">
      <div className="w-full max-w-4xl">
        <RecipeCard
          title={recipeData.title}
          description={recipeData.description}
          ingredients={recipeData.ingredients}
          imageUrl={recipeData.imageUrl}
          cookTime={recipeData.cookTime}
          servings={recipeData.servings}
          calories={recipeData.calories}
        />
      </div>
    </div>
  );
}