Staaarter

Behind the Scenes Kitchen

Kitchen tour section with hero image, station features, certification badges, and tour booking CTA. Perfect for showcasing kitchen facilities and food preparation areas.

By Staaarter Team
Food
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
badge{ label: string; variant?: "default" | "secondary" | "outline" }nonePill above the heading; only rendered when badge is truthy.
headingReactNodenoneSection heading.
descriptionstringundefinedSection intro text.
heroImageMediaSlotImageundefinedWide banner photo above the stations grid; falls back to a placeholder when omitted.
stationsStationItem[]noneKitchen station cards, each with an icon, title, and description.
certificationsCertificationItem[][]Certification badges shown in a row; the whole row is omitted when empty.
ctaLabelstring"Book a kitchen tour"Primary CTA button label.
ctaHrefstring"#"Primary CTA link target.
secondaryLabelstringundefinedSecondary CTA button label; button is omitted when unset.
secondaryHrefstring"#"Secondary CTA link target.
classNamestringnoneExtra 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.