Agenda Day Picker

Installation

pnpm dlx shadcn@latest add @cleverui/agenda-day-picker

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

Usage

tsx

import { AgendaDayPicker } from '@/components/blocks/agenda-day-picker'

Exampletsx

import { AgendaDayPicker } from '@/components/blocks/agenda-day-picker'

export default function AgendaDayPickerDemo() {
  return (
    <div className="mx-auto w-full">
      <AgendaDayPicker
        eyebrow="NOV 12–13 2026 · SINGLE TRACK"
        heading="Agenda"
        defaultDay={0}
        days={[
          {
            label: 'DAY 1',
            date: '12 NOV',
            sessions: [
              {
                time: '09:00',
                title: 'Doors & registration',
                tag: 'ARRIVAL',
              },
              {
                time: '09:45',
                title: 'Opening remarks',
                speaker: 'Mara Chen · Festival Director',
              },
              {
                time: '10:15',
                title: 'Building rooms people actually stay in',
                speaker: 'Jonah Okonkwo · Studio North',
                tag: 'KEYNOTE',
              },
              {
                time: '11:15',
                title: 'Break',
                tag: 'BREAK',
              },
              {
                time: '11:35',
                title: 'Live production without the panic',
                speaker: 'Priya Nair · Stagecraft Labs',
              },
              {
                time: '12:30',
                title: 'Lunch in the courtyard',
                tag: 'BREAK',
              },
              {
                time: '13:45',
                title: 'Soundcheck clinic: gain structure',
                speaker: 'Eli Vargas · Audio Guild',
              },
              {
                time: '15:00',
                title: 'Artist care on a twelve-hour day',
                speaker: 'Samira Holt · Tour Ops',
              },
              {
                time: '16:15',
                title: 'Closing transmission · Day 1',
                speaker: 'Mara Chen',
              },
            ],
          },
          {
            label: 'DAY 2',
            date: '13 NOV',
            sessions: [
              {
                time: '09:30',
                title: 'Coffee & badge pickup',
                tag: 'ARRIVAL',
              },
              {
                time: '10:00',
                title: 'The economics of a mid-size festival',
                speaker: 'Helena Brooks · Clearseat',
                tag: 'KEYNOTE',
              },
              {
                time: '11:00',
                title: 'Break',
                tag: 'BREAK',
              },
              {
                time: '11:20',
                title: 'Volunteer systems that scale past 200',
                speaker: 'Theo Raines · Civic Stage',
              },
              {
                time: '12:30',
                title: 'Lunch',
                tag: 'BREAK',
              },
              {
                time: '13:45',
                title: 'Accessibility as production, not afterthought',
                speaker: 'Nina Cole · Access Works',
              },
              {
                time: '15:00',
                title: 'Roundtable: next year\'s line',
                speaker: 'Full panel',
              },
              {
                time: '16:30',
                title: 'Festival close',
                speaker: 'Mara Chen',
              },
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

AgendaDayPicker accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Agenda'`	–
`eyebrow`	`string`	–	dated mono kicker, preformatted, never derived from Date
`days`*	`AgendaDay[]`	–	–
`defaultDay`	`number`	`0`	–

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

Referenced types

Typestsx

export interface AgendaDay {
  /** short pill label, e.g. 'DAY 1' or 'FRI' */
  label: string
  /** preformatted, e.g. '12 NOV' */
  date?: string
  sessions: AgendaSession[]
}

export interface AgendaSession {
  /** preformatted, e.g. '10:30' */
  time: string
  title: string
  speaker?: string
  /** marks keynotes and breaks, mono micro-label */
  tag?: string
}

Related components

Event Schedule Tracks

A multi-track agenda, mono time rail against parallel track columns that collapse into one accessible chronological list on mobile. Conference wayfinding, poster confidence.

Event Workshop Grid

Workshop and breakout sessions as poster cards, room and time in mono, level chips, seats-left urgency, and an honest waitlist state. React and Tailwind grid for conferences.

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.

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 Agenda Day Picker component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/agenda-day-picker`. 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 Agenda Day Picker require?

Agenda Day Picker 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 Agenda Day Picker 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