Recorded Sessions Archive

Leads with a large image tile with a floating card overlaid near its bottom edge presenting the most recent session's "Watch recording" title and duration. Below, every earlier session lists as hairline-divided rows with its date, location, and running time. Perfect for an on-demand catalog of past conference talks.

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

npx shadcn add https://staaarter.com/r/recorded-sessions-archive.json

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

Usage

The file also exports event24Demo, 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 { Event24, event24Demo } from "@/components/blocks/event/event24";

export default function Page() {
  return <Event24 {...event24Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading.
heading	ReactNode	none	Section heading.
description	string	undefined	Supporting copy under the heading.
latestTitle	string	none	Title shown on the floating "Watch recording" card.
latestDuration	string	none	Duration shown on the floating card, e.g. "52 min".
latestPhoto	{ src: string; alt: string }	undefined	Photo behind the floating card; renders a placeholder via MediaSlot when omitted.
sessions	RecordedSession[]	none	Earlier sessions, rendered as hairline-divided rows below the featured photo.
className	string	none	Extra classes for the outer section element.

Types

interface RecordedSession {
  title: string;
  date: string;
  location: string;
  duration: string;
}

Behavior notes

This is a static, presentational block: the floating card and every archive row render fixed props, there is no real video player, playback state, or search/filter.
The floating "Watch recording" card and every row are non-interactive presentation, not real links — clicking anything here does not open or play a video.

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.