Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/event-tickets-coming-soon.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon57.tsx instead.
Usage
The file also exports comingsoon57Demo, 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 { ComingSoon57, comingsoon57Demo } from "@/components/blocks/coming-soon/comingsoon57"; export default function Page() { return <ComingSoon57 {...comingsoon57Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Coming soon" | Small label above the event name. |
| eventName | string | none | Name of the event, shown above the heading. |
| heading | string | "Tickets go on sale soon" | Main heading. |
| description | string | "Sign up for a ticket alert..." | Supporting copy under the heading. |
| dateLabel | string | none | Formatted date range shown next to a calendar icon. |
| venueLabel | string | none | Venue name/location shown next to a map-pin icon. |
| speakers | EventSpeaker[] | none | Confirmed speakers rendered as a stacked avatar row. |
| speakersNote | string | "Speakers confirmed so far" | Caption under the speaker avatar row. |
| className | string | none | Extra classes for the outer section element. |
Types
interface EventSpeaker { name: string; image?: { src: string; alt: string }; }
Behavior notes
- The email field and submit are real client state (useState): submitting swaps the form for a confirmation message, nothing is sent to a server.
- Speakers fall back to initials (via AvatarFallback/initialsFromName) when no `image` is supplied per entry.
- The date and venue labels are plain formatted strings passed in as props, no Date.now() or new Date() is ever called in the render path.
More Coming Soon Blocks
View all →Countdown Timer Launch
A centered launch page with a live days/hours/minutes/seconds countdown to a target date.
Development Progress Milestones
A centered launch page with an overall progress bar and a milestone tracker list with status badges.
Social Connect Launch
A centered coming-soon page with pill-style outline buttons linking out to Twitter, GitHub, LinkedIn, and email.
Animated Icons Preview
A centered coming-soon page with a row of bobbing icon tiles and a pulsing build-status indicator.
Sneak Peek Feature Grid
A centered coming-soon page with a grid of blurred feature cards teased behind a lock icon overlay.
Waitlist with Avatars
A centered coming-soon page with a working waitlist signup form, stacked subscriber avatars, and a live join count.