Cook Step Timer

Recipe-step card with a step pill, mono MM:SS countdown, instruction paragraph, and rose progress bar.

Step 4 / 707:42

Simmer the sauce

Keep at a gentle simmer, stirring every two minutes so the garlic doesn't scorch.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Food8 } from "@/components/beste/piece/food8";

<Food8
  step="Simmer the sauce"
  instruction="Keep at a gentle simmer, stirring every two minutes so the garlic doesn't scorch."
  stepIndex={4}
  totalSteps={7}
  minutes={7}
  seconds={42}
  tone="rose"
/>