Featured Session Schedule

Opens with a split featured-session card pairing a photo with the day's headline talk's date, time, and format. Below, the remainder of the schedule renders as hairline-divided rows, each with a bordered month/day date tile, the speaker's name and small avatar, a seat-count note, and a decorative Register action. Perfect for a single conference day's agenda page.

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, avatar, avatar-initials, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/featured-session-schedule.json

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

Usage

The file also exports event23Demo, 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 { Event23, event23Demo } from "@/components/blocks/event/event23";

export default function Page() {
  return <Event23 {...event23Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading, e.g. the day and date.
heading	ReactNode	none	Section heading.
description	string	undefined	Supporting copy under the heading.
featuredTitle	string	none	Title of the day's headline session, shown in the featured card.
featuredDescription	string	undefined	Short description of the featured session.
featuredDate	string	none	Date line for the featured session, shown with a calendar icon.
featuredTime	string	none	Time line for the featured session, shown with a clock icon.
featuredFormat	string	none	Format line for the featured session (e.g. "Main stage · Livestreamed"), shown with a video icon.
featuredPhoto	{ src: string; alt: string }	undefined	Photo for the featured session card; renders a placeholder via MediaSlot when omitted.
sessions	ScheduleSession[]	none	The rest of the day's sessions, rendered as hairline-divided rows below the featured card.
className	string	none	Extra classes for the outer section element.

Types

interface ScheduleSession {
  title: string;
  month: string;
  day: string;
  time: string;
  speaker: { name: string; avatar?: { src: string; alt: string } };
  seatsNote: string;
}

Behavior notes

This is a static, presentational block: the featured card and every schedule row render fixed props, there is no live filtering, sorting, or countdown.
Each row's Register button is a plain, unwired button (no onClick) — there is no real registration flow or seat-reservation logic behind it.
The date tile's month/day and the seatsNote text are plain string props, not computed from a real date or a live seat count.

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.

event-hero-with-social-proof

Event Hero with Social Proof

Hero with a heading, a 3-stat strip (attendees/speakers/countries), and a trusted-by company row.

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.