Event Tickets Coming Soon
A centered coming-soon screen for an event that hasn't opened ticket sales yet. Shows the event name, a date/venue meta row with icons, a working ticket-alert email form with a confirmation state, and a stacked row of confirmed-speaker avatars.
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
Countdown Timer Launch
A centered launch page with a live days/hours/minutes/seconds countdown to a target date.
development-progress-milestones
Development Progress Milestones
A centered launch page with an overall progress bar and a milestone tracker list with status badges.
social-connect-launch
Social Connect Launch
A centered coming-soon page with pill-style outline buttons linking out to Twitter, GitHub, LinkedIn, and email.
animated-icons-preview
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
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
Waitlist with Avatars
A centered coming-soon page with a working waitlist signup form, stacked subscriber avatars, and a live join count.