Staaarter

Event Hero with Ticket Pricing

Centered event hero built around a prominent ticket price: a large early-bird price next to a strikethrough original price, a small early-bird deadline note, and a primary "Get your ticket" CTA. Perfect for tech summits and paid conferences.

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/event-hero-with-ticket-pricing.json

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

Usage

The file also exports event3Demo, 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 { Event3, event3Demo } from "@/components/blocks/event/event3";

export default function Page() {
  return <Event3 {...event3Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall badge above the heading, e.g. the event name.
headingReactNodenoneCentered hero heading.
descriptionstringundefinedShort supporting paragraph under the heading.
earlyBirdPricestringnoneLarge discounted price shown first, e.g. "$399".
originalPricestringnoneOriginal price rendered with a strikethrough next to earlyBirdPrice, e.g. "$599".
earlyBirdEndsLabelstringnoneSmall note under the price, e.g. "Early bird ends December 1, 2026".
primaryCtaEventCtaLinknonePrimary button label + href, e.g. "Get your ticket".
classNamestringnoneExtra classes for the outer section element.

Types

interface EventCtaLink {
  label: string;
  href: string;
}

Behavior notes

  • earlyBirdPrice, originalPrice, and earlyBirdEndsLabel are static string props; there is no countdown timer or date math, the deadline copy is authored as plain text.
  • primaryCta renders as a plain link (Button with render={<Link/>}); it's decorative in the demo, there is no real checkout or ticketing flow wired up.