Recipe Card

Cards

About

Recipe Card This component displays a recipe with nutritional information and ingredients in a clean, card-based layout. It's fully prop-driven, making it easy to reuse for any recipe.

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

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

const RecipeCardDemo = () => {
  // Data for the recipe card, easily updatable
  const hamburgerData = {
    title: "Classic beef burgers, 15 min cook time",
    heading: "Hamburger",
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-azbkcojk7G9xRKqA75hmDxp8KWWgDZ.png&w=1000&q=75", // Using an external link for the image
    nutrition: [
      { label: "Calories", value: "650" },
      { label: "Protein", value: "31g" },
      { label: "Fat", value: "27g" },
      { label: "Carbs", value: "42g" },
    ],
    ingredients: [
      "1 pound ground lean beef",
      "1/2 cup minced onion",
      "1/4 cup fine dried bread crumbs",
      "1/2 teaspoon salt",
      "1/4 teaspoon pepper",
      "1 hamburger buns",
      "1/4 cup mayonnaise",
      "1/4 cup ketchup",
      "1 iceberg lettuce leaves",
      "1 firm-ripe tomato",
      "1/4 cup fine dried bread crumbs",
      "1/2 teaspoon salt",
      "1/4 teaspoon pepper",
      "1 hamburger buns",
      "1/4 cup mayonnaise",
      "1/4 cup ketchup",
      ,
    ],
  };

  return (
    <div className="flex items-center justify-center bg-background p-4 min-h-screen">
      <RecipeCard
        title={hamburgerData.title}
        heading={hamburgerData.heading}
        imageSrc={hamburgerData.imageSrc}
        nutrition={hamburgerData.nutrition}
        ingredients={hamburgerData.ingredients}
      />
    </div>
  );
};

export default RecipeCardDemo;