Event Past Editions

Installation

pnpm dlx shadcn@latest add @cleverui/event-past-editions

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { EventPastEditions } from '@/components/blocks/event-past-editions'

Exampletsx

import { EventPastEditions } from '@/components/blocks/event-past-editions'

export default function EventPastEditionsDemo() {
  return (
    <div className="mx-auto w-full">
      <EventPastEditions
        eyebrow="SINCE 2019 · SIX EDITIONS · FOUR CITIES"
        heading="Past editions"
        editions={[
          {
            year: '2025',
            city: 'Melbourne',
            venue: 'Town Hall',
            note: 'The blackout set, the whole room lit by phones',
            attendance: '4,200 attendees',
            latest: true,
            href: '#recap-2025',
          },
          {
            year: '2024',
            city: 'Sydney',
            venue: 'Carriageworks',
            note: 'Opening night rain forced the courtyard onto the main floor, best session of the week',
            attendance: '3,800 attendees',
            href: '#recap-2024',
          },
          {
            year: '2023',
            city: 'Melbourne',
            venue: 'Arts Centre',
            note: 'First full accessibility slate: live captions on every stage',
            attendance: '3,100 attendees',
          },
          {
            year: '2022',
            city: 'Brisbane',
            venue: 'Powerhouse',
            note: 'Sold out workshops in ninety minutes, waitlist ran to 600',
            attendance: '2,400 attendees',
            href: '#recap-2022',
          },
          {
            year: '2021',
            city: 'Online',
            venue: 'Hybrid stream',
            note: 'Remote-first year: 48 cities dialed into a single keynote',
            attendance: '5,600 attendees',
          },
          {
            year: '2019',
            city: 'Melbourne',
            venue: 'The Tivoli',
            note: 'First night. Two stages. A rented sound desk and a printed programme',
            attendance: '890 attendees',
          },
        ]}
      />
    </div>
  )
}

API reference

EventPastEditions accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	mono kicker, preformatted, never derived from Date
`heading`	`string`	`'Past editions'`	–
`editions`*	`PastEdition[]`	–	chronological editions, newest first in the demo

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface PastEdition {
  /** preformatted, e.g. '2025' */
  year: string
  city?: string
  venue?: string
  /** one headline moment */
  note?: string
  /** preformatted, e.g. '4,200 attendees' */
  attendance?: string
  /** marks exactly one row as the most recent */
  latest?: boolean
  /** links the note to its recap */
  href?: string
}

Related components

Event Countdown Hero

The event's own countdown hero, oversized date numerals, a mono venue line, poster-scale rolling countdown digits, and one ticket CTA. Doors open in exactly this long.

Event Lineup Board

A poster-type lineup board, acts in oversized weight-contrast rows, stage and time in mono, day tabs with real tablist semantics. The bill is the artwork.

Speaker Spotlight Row

Headline speakers as poster rows, names set huge, talk titles in italic, companies in mono, and a day-stage chip per row. The speaker bill is the artwork.

Sponsor Tier Wall

Sponsors ranked the way posters rank them, headline wordmarks set huge, partners mid, community small, grouped under mono tier labels on hairline rules. No logo files needed.

Agenda Day Picker

Day pills over a single-track agenda, pick a day, read its sessions down a mono time rail. One room, one running order, real tablist semantics.

Event CFP Block

A call-for-proposals block, poster heading, mono deadline rail, talk formats with durations, and one submit CTA. React and Tailwind CFP section for conference sites.

Frequently asked questions

How do I install the Event Past Editions component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/event-past-editions`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Event Past Editions require?

Event Past Editions uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Event Past Editions to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code