Event Workshop Grid

Installation

pnpm dlx shadcn@latest add @cleverui/event-workshop-grid

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

Usage

tsx

import { EventWorkshopGrid } from '@/components/blocks/event-workshop-grid'

Exampletsx

import { EventWorkshopGrid } from '@/components/blocks/event-workshop-grid'

export default function EventWorkshopGridDemo() {
  return (
    <div className="mx-auto w-full">
      <EventWorkshopGrid
        eyebrow="DAY 2 · BREAKOUT SESSIONS · LIMITED SEATS"
        heading="Workshops"
        intro="Every workshop is hands-on and capped, when a room fills, it fills."
        columns={3}
        workshops={[
          {
            title: 'Ship your first shader',
            host: 'Mara Chen',
            hostJobTitle: 'Creative Director',
            room: 'ROOM 3',
            time: '10:00 AM',
            level: 'Beginner',
            blurb:
              'Write a fragment shader from a blank canvas and run it on a live LED wall before lunch.',
            seatsLeft: '8 seats left',
            href: '#shader',
          },
          {
            title: 'Cue sheets as choreography',
            host: 'Priya Nair',
            hostJobTitle: 'Head of Production',
            room: 'STUDIO B',
            time: '10:00 AM',
            level: 'Intermediate',
            blurb:
              'Build a shared show bible that stage managers, FOH, and artists can actually trust.',
            seatsLeft: '3 seats left',
            href: '#cues',
          },
          {
            title: 'Ticket economics for mid-size bills',
            host: 'Helena Brooks',
            hostJobTitle: 'CEO, Clearseat',
            room: 'ROOM 1',
            time: '2:00 PM',
            level: 'All levels',
            blurb:
              'Price ladders, holdbacks, and comp policy, model a real bill with your own numbers.',
            full: true,
            href: '#tickets',
          },
          {
            title: 'Gain structure under pressure',
            host: 'Eli Vargas',
            hostJobTitle: 'FOH Engineer',
            room: 'MAIN HALL',
            time: '2:00 PM',
            level: 'Advanced',
            blurb:
              'Ring out a festival stage in twenty minutes without killing the drums or the vocals.',
            seatsLeft: '12 seats left',
          },
          {
            title: 'Access as production, not policy',
            host: 'Nina Cole',
            hostJobTitle: 'Director, Access Works',
            room: 'THEATRE',
            time: '4:00 PM',
            level: 'All levels',
            blurb:
              'Caption workflows, quiet rooms, and step-free routes, bake them into the run sheet.',
            seatsLeft: '5 seats left',
            href: '#access',
          },
          {
            title: 'Festival without a war room',
            host: 'Jonah Okonkwo',
            hostJobTitle: 'Founder, Studio North',
            room: 'ROOM 2',
            time: '4:00 PM',
            level: 'Intermediate',
            blurb:
              'Async ops for a three-day site: decision logs, radio protocols, and end-of-day debriefs.',
            seatsLeft: '1 seat left',
            href: '#ops',
          },
        ]}
      />
    </div>
  )
}

API reference

EventWorkshopGrid accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Workshops'`	–
`eyebrow`	`string`	–	dated mono kicker, preformatted, never derived from Date
`intro`	`string`	–	one urgent plain sentence
`workshops`*	`WorkshopItem[]`	–	–
`columns`	`2 \| 3`	`3`	cards per row at lg; 2 at sm, 1 below

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

Referenced types

Typestsx

export interface WorkshopItem {
  title: string
  host?: string
  hostJobTitle?: string
  /** preformatted, e.g. 'ROOM 3' */
  room?: string
  /** preformatted, e.g. '2:00 PM' */
  time?: string
  /** short word, e.g. 'Beginner' */
  level?: string
  blurb?: string
  /** preformatted, e.g. '8 seats left', no seat math in render */
  seatsLeft?: string
  /** honest waitlist state when true */
  full?: boolean
  /** links the title */
  href?: 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.

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.

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.

Frequently asked questions

How do I install the Event Workshop Grid 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-workshop-grid`. 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 Workshop Grid require?

Event Workshop Grid uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Event Workshop Grid 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