Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/behind-the-scenes-kitchen.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food23.tsx instead.
Usage
The file also exports food23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Food23, food23Demo } from "@/components/blocks/food/food23"; export default function Page() { return <Food23 {...food23Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; variant?: "default" | "secondary" | "outline" } | none | Pill above the heading; only rendered when badge is truthy. |
| heading | ReactNode | none | Section heading. |
| description | string | undefined | Section intro text. |
| heroImage | MediaSlotImage | undefined | Wide banner photo above the stations grid; falls back to a placeholder when omitted. |
| stations | StationItem[] | none | Kitchen station cards, each with an icon, title, and description. |
| certifications | CertificationItem[] | [] | Certification badges shown in a row; the whole row is omitted when empty. |
| ctaLabel | string | "Book a kitchen tour" | Primary CTA button label. |
| ctaHref | string | "#" | Primary CTA link target. |
| secondaryLabel | string | undefined | Secondary CTA button label; button is omitted when unset. |
| secondaryHref | string | "#" | Secondary CTA link target. |
| className | string | none | Extra classes for the outer section element. |
Types
type StationItem = { icon: LucideIcon; title: string; description: string; }; type CertificationItem = { label: string };
Behavior notes
- The hero image uses MediaSlot, so it renders a decorative placeholder gradient instead of a broken image when heroImage is omitted.
- The station icons are passed directly as LucideIcon component references in the stations array, since this is a plain server component (no client-boundary restriction on function-valued props applies here).
- The certifications row and its "Certified by:" label are only rendered when certifications has at least one entry.
- The secondary button only renders when secondaryLabel is set; the primary CTA always renders.
- The tour booking CTA and secondary link are both static hrefs, not wired to a real booking flow.
More Food Blocks
View all →Loyalty Rewards Program
Four-tier rewards program with points earning steps, benefit lists, and app store download buttons.
Gift Card Shop
Gift card purchase interface with preset amounts, custom input, digital/physical delivery options, and live preview.
Online Ordering Hub
Delivery platform cards with logos, fees, and delivery times alongside pickup info with address and phone.
Expandable Menu Accordion
Collapsible menu items revealing full images, calorie counts, protein info, and allergen badges.
Daily Specials Chalkboard
Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp.
Dietary Filter Menu
Interactive menu with dietary filter buttons (vegetarian, vegan, gluten-free) and allergen warnings.