Staaarter

Value Meal Bundles

Bundle pricing cards with images, savings badges, itemized contents, and order buttons. Perfect for family meals, combo deals, and catering packages.

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/value-meal-bundles.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food19.tsx instead.

Usage

The file also exports food19Demo, 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 { Food19, food19Demo } from "@/components/blocks/food/food19";

export default function Page() {
  return <Food19 {...food19Demo} />;
}

Props

PropTypeDefaultDescription
headingstringnoneSection heading above the bundle grid.
descriptionstringnoneSection intro text below the heading.
bundlesBundleItem[]noneBundle pricing cards, rendered in a responsive 1/2/3-column grid.
classNamestringnoneExtra classes for the outer section element.

Types

type BundleItem = {
  name: string;
  image?: { src: string; alt: string };
  price: string;
  originalPrice?: string;
  savingsLabel?: string;
  contents: string[];
  ctaLabel?: string;
};

Behavior notes

  • The heading/description block only renders when at least one of the two is set.
  • A bundle's savings badge only renders when savingsLabel is set; a bundle image falls back to a placeholder when omitted.
  • originalPrice, when present, renders struck through next to price; when omitted only price shows.
  • Every order button is decorative and inert (no click handler): there is no real ordering backend wired up.
  • ctaLabel defaults to "Order now" per bundle when not supplied.