Staaarter

Event Hero with Social Proof

Event hero displaying a heading and subheading, a stat strip of attendee count, speaker count, and country/reach count, and a "Trusted by teams at" row of company name pills below. Perfect for enterprise summits and industry 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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/event-hero-with-social-proof.json

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

Usage

The file also exports event4Demo, 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 { Event4, event4Demo } from "@/components/blocks/event/event4";

export default function Page() {
  return <Event4 {...event4Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodenoneCentered hero heading.
subheadingstringundefinedSupporting paragraph under the heading.
statsEventStat[]noneExactly the number of stat tiles rendered in the strip; the demo uses 3 (attendees, speakers, countries).
trustedByLabelstring"Trusted by teams at"Caption above the company row.
companiesstring[]noneCompany names rendered as plain muted-foreground badge pills; no logo images are used.
classNamestringnoneExtra classes for the outer section element.

Types

interface EventStat {
  label: string;
  value: string;
}

Behavior notes

  • Stats are static string values, not live counters; the grid is a fixed 3-column layout so the intended use is exactly 3 stats, though more will still wrap.
  • Company names render as text badge pills (no logo image assets exist in this repo for these); there is no invented logo artwork.

More Event Blocks

View all →

conference-hero-with-image

Conference Hero with Image

Split hero with a featured photo, date badge, location, attendee stat, and dual CTAs.

minimal-event-hero

Minimal Event Hero

Centered, image-free hero with an oversized heading, date/location line, and two CTAs.

event-hero-with-ticket-pricing

Event Hero with Ticket Pricing

Centered hero with an early-bird price, a strikethrough original price, and a deadline note.

personal-schedule-builder

Personal Schedule Builder

Interactive session picker that lets attendees build their own conference agenda.

team-discount-calculator

Team Discount Calculator

Live quantity stepper that applies tiered group discounts to a seat total.

ticket-selection-cart

Ticket Selection Cart

Multi-tier ticket selector with per-tier quantity steppers and a live cart total.