Event Schedule Tracks

Installation

pnpm dlx shadcn@latest add @cleverui/event-schedule-tracks

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

Usage

tsx

import { EventScheduleTracks } from '@/components/blocks/event-schedule-tracks'

Exampletsx

import { EventScheduleTracks } from '@/components/blocks/event-schedule-tracks'

export default function EventScheduleTracksDemo() {
  return (
    <div className="mx-auto w-full">
      <EventScheduleTracks
        heading="Schedule"
        dateLabel="Saturday 26 July"
        tracks={['Main Stage', 'Workshop Room', 'Studio C']}
        slots={[
          {
            time: '09:00',
            sessions: [
              {
                title: 'Doors & badge pickup',
                speaker: 'Front of house',
                tag: 'Arrival',
              },
              null,
              null,
            ],
          },
          {
            time: '10:00',
            sessions: [
              {
                title: 'Opening keynote: The bill is the brand',
                speaker: 'Maya Chen, Festival Director',
                tag: 'Keynote',
              },
              {
                title: 'Stage plot clinic',
                speaker: 'Ravi Okonkwo',
              },
              {
                title: 'Volunteer briefing',
                speaker: 'Ops desk',
              },
            ],
          },
          {
            time: '11:30',
            sessions: [
              {
                title: 'Lineup programming roundtable',
                speaker: 'Panel · 4 bookers',
              },
              {
                title: 'Soundcheck without the chaos',
                speaker: 'Elena Voss',
              },
              {
                title: 'Merch logistics lab',
                speaker: 'Tomás Rivera',
              },
            ],
          },
          {
            time: '13:00',
            sessions: [
              {
                title: 'Lunch break',
                speaker: 'Courtyard catering',
              },
              null,
              null,
            ],
          },
          {
            time: '14:15',
            sessions: [
              {
                title: 'Accessibility as production design',
                speaker: 'Jordan Hale',
              },
              {
                title: 'Hands-on: RF coordination',
                speaker: 'Priya Nair',
                tag: 'Workshop',
              },
              {
                title: 'Poster & print production',
                speaker: 'Studio C crew',
              },
            ],
          },
          {
            time: '16:00',
            sessions: [
              {
                title: 'Closing notes & afterparty map',
                speaker: 'Maya Chen',
                tag: 'Keynote',
              },
              {
                title: 'Office hours with bookers',
                speaker: 'By appointment',
              },
              null,
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

EventScheduleTracks accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Schedule'`	–
`dateLabel`	`string`	–	preformatted date line, e.g. 'Saturday 26 July'
`tracks`*	`string[]`	–	–
`slots`*	`ScheduleSlot[]`	–	–

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

Referenced types

Typestsx

export interface ScheduleSlot {
  /** preformatted, e.g. '10:30' */
  time: string
  /** aligned by index with tracks; null leaves that track empty */
  sessions: (ScheduleSession | null)[]
}

export interface ScheduleSession {
  title: string
  speaker?: string
  /** marks keynotes etc., mono micro-label + primary keyline */
  tag?: string
}

Related components

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.

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.

Event Code of Conduct

A code-of-conduct and accessibility block, a confident pledge set large, provisions as a dl grid, and real report channels. React and Tailwind trust section for events.

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.

Frequently asked questions

How do I install the Event Schedule Tracks 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-schedule-tracks`. 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 Schedule Tracks require?

Event Schedule Tracks 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 Schedule Tracks 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