Delivery Tracker

Four-step delivery progress with icon tiles, a ringed active step, ETA pill, and a courier footer.

Order trackingETA 15–20 min
Order
Kitchen
On the way
Delivered
Emre · Scooter · 4.9★

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

Import & use
import { Food4 } from "@/components/beste/piece/food4";

<Food4
  phase="riding"
  eta="15–20 min"
  courier="Emre · Scooter · 4.9★"
  trackingLabel="Order tracking"
  etaPrefix="ETA"
  receivedLabel="Order"
  preparingLabel="Kitchen"
  ridingLabel="On the way"
  deliveredLabel="Delivered"
/>

More Food pieces

View all Food
Step 4 / 707:42
Simmer the sauce

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

Cook Step Timer

food8

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

Lokal · dining roomAnatolian · Small plates4.7
Lokal · Modern Türk
Karaköy30–45 min₺₺₺

Restaurant Card

food2

Venue tile with a warm gradient cover, floating cuisine and rating pills, and a neighborhood-ETA row.

Lokal · Modern Türk
2× Meze plate₺320
1× Roasted miso salmon₺240
1× Pistachio baklava₺110
Subtotal₺670
Delivery₺35
Tip₺50
Total₺755

Order Receipt

food5

Itemized food order receipt with qty-by-name lines, a subtotal/delivery/tip breakdown, and bold total.

Grilled chicken bowl620 kcal
Carbs68 g
Protein42 g
Fat22 g

Macro Breakdown

food6

Dish nutrition card with a kcal line, stacked macro bar, and three color-keyed grams-per-macro tiles.

Lemon-thyme chicken
45 min480 kcal4 servings
4chicken thighs
2lemons, zest and juice
3 tbspolive oil
4 sprigsfresh thyme

Recipe Card

food7

Recipe tile with a warm chef tile, time/kcal/servings row, and a two-column ingredients list.

Reservation confirmedLokal · Modern Türk
WhenThu, Apr 25 · 20:00
Guests4
SeatingPatio · Table 12
CodeLKL-7Z91

Reservation Card

food3

Emerald-bordered reservation summary with when/guests/seating/code arranged on a four-cell grid.