Staaarter

Conference Bundle Pricing

Bundle pricing section for combining passes, workshops, and recordings: three cards (Conference Only, Conference + Workshops, All Access) each with a checklist of included items, a savings badge relative to buying items separately, and a price. One card is visually marked as the recommended best-value option. Perfect for conference packages and multi-item ticket bundles.

By Staaarter Team
Event
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/conference-bundle-pricing.json

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

Usage

The file also exports event28Demo, 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 { Event28, event28Demo } from "@/components/blocks/event/event28";

export default function Page() {
  return <Event28 {...event28Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedBadge text above the heading.
headingReactNodenoneSection heading.
descriptionstringundefinedSupporting paragraph under the heading.
tiersBundleTier[]noneThe bundle pricing cards to render, in display order.
classNamestringnoneExtra classes for the outer section element.

Types

interface BundleTier {
  name: string;
  price: string;
  priceSuffix?: string;
  savingsLabel?: string;
  isFeatured?: boolean;
  features: string[];
  ctaLabel?: string;
  ctaHref?: string;
}

Behavior notes

  • Every bundle's "Select bundle" button is a plain link (Button with render={<Link/>}) pointing at ctaHref; there is no real checkout or cart flow wired up, it's decorative in the demo.
  • isFeatured only controls the visual highlight (border, shadow, and a "Best value" badge) on one card; it has no other effect.