Recipe Card

Cards

About

Recipe Card This component displays a recipe with steps and nutritional information in a clean, two-column layout that adapts to smaller screens. It features animations for a more dynamic user experience.

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-1"; // Adjust path as needed

export default function RecipeCardDemo() {
  // Sample data for the recipe steps
  const recipeSteps = [
    "Wash 200 grams of cherry tomatoes and cut them in halves.",
    "In a large bowl, add 100 grams of mixed salad greens.",
    "Add the halved cherry tomatoes to the salad greens.",
    "Drizzle 2 tablespoons of olive oil and 1 tablespoon of lemon juice over the salad.",
    "Sprinkle a pinch of salt and black pepper to taste.",
    "Toss the salad gently to combine all ingredients well.",
    "Serve immediately as a refreshing side or light meal.",
  ];

  // Sample data for nutrition facts
  const nutritionFacts = [
    { value: 150, label: "kCal" },
    { value: "3 g", label: "Protein" },
    { value: "10 g", label: "Fat" },
    { value: "12 g", label: "Carbs" },
  ];

  return (
    <div className="flex items-center justify-center w-full min-h-[400px] bg-background p-4">
      <RecipeCard steps={recipeSteps} nutrition={nutritionFacts} />
    </div>
  );
}