Event Lineup Board

Installation

pnpm dlx shadcn@latest add @cleverui/event-lineup-board

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

Usage

tsx

import { EventLineupBoard } from '@/components/blocks/event-lineup-board'

Exampletsx

import { EventLineupBoard } from '@/components/blocks/event-lineup-board'

export default function EventLineupBoardDemo() {
  return (
    <div className="mx-auto w-full">
      <EventLineupBoard
        eyebrow="JUL 24–26 2026 · CARRIAGEWORKS"
        heading="Lineup"
        defaultDay={0}
        days={[
          {
            label: 'FRI 24',
            acts: [
              {
                name: 'Sable Coast',
                stage: 'Main Hall',
                time: '10:00 PM',
                headliner: true,
              },
              {
                name: 'Northbound Echo',
                stage: 'Warehouse B',
                time: '8:30 PM',
              },
              {
                name: 'Kite Protocol',
                stage: 'Courtyard',
                time: '7:00 PM',
              },
              {
                name: 'Vellum',
                stage: 'Warehouse B',
                time: '5:45 PM',
              },
            ],
          },
          {
            label: 'SAT 25',
            acts: [
              {
                name: 'Marrow & Wire',
                stage: 'Main Hall',
                time: '10:30 PM',
                headliner: true,
              },
              {
                name: 'Glass Parish',
                stage: 'Main Hall',
                time: '8:45 PM',
              },
              {
                name: 'The Late Atlas',
                stage: 'Warehouse B',
                time: '7:15 PM',
              },
              {
                name: 'Copper Static',
                stage: 'Courtyard',
                time: '6:00 PM',
              },
              {
                name: 'Field Notes DJ Set',
                stage: 'Courtyard',
                time: '4:30 PM',
              },
            ],
          },
          {
            label: 'SUN 26',
            acts: [
              {
                name: 'Iris Low',
                stage: 'Main Hall',
                time: '9:00 PM',
                headliner: true,
              },
              {
                name: 'Second Harbour',
                stage: 'Warehouse B',
                time: '7:30 PM',
              },
              {
                name: 'Paper Choir',
                stage: 'Main Hall',
                time: '6:00 PM',
              },
              {
                name: 'Closing Transmission',
                stage: 'Courtyard',
                time: '4:00 PM',
              },
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

EventLineupBoard accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	dated mono kicker, preformatted, never derived from Date
`heading`	`string`	`'Lineup'`	–
`days`*	`LineupDay[]`	–	–
`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 LineupDay {
  /** short preformatted tab, e.g. 'FRI 24' */
  label: string
  acts: LineupAct[]
}

export interface LineupAct {
  name: string
  stage?: string
  /** preformatted, e.g. '9:30 PM' */
  time?: string
  headliner?: boolean
}

Related components

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 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 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 Past Editions

Past editions as a typographic reel, years set huge, cities in mono, one headline moment and attendance per row. A React and Tailwind pedigree block for event sites.

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.

Frequently asked questions

How do I install the Event Lineup Board 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-lineup-board`. 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 Lineup Board require?

Event Lineup Board 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 Lineup Board 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