Event Speakers
Speaker line-up as a big name list; the focused speaker's duotone card and talk appear alongside.
- Type: Events section
- Styles: Dark, Minimal
- Licence: Charcoal UI Pro
About Event Speakers
Event Speakers lists names in very large type. Hovering or focusing a name brings up that speaker's duotone card with their role and talk title beside the list.
It is a full-width events section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.
When to use Event Speakers
- Conferences and festivals.
- Webinars and lecture series.
- Launch events.
- Podcasts listing guests.
How it is built
The card crossfades as the focus moves, initials stand in for headshots, and speakers take a name, role, talk and image.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Event Speakers
Event Speakers is part of 3 full templates, so you can see it in a finished page.
- Signal template: Sell out a conference.
- Launch Night template: One evening, one RSVP.
- Townhall template: Sessions people register for.
- Event Schedule: A React event agenda with day tabs, track filters and bookmarks
- Event Tickets: React ticket tiers with sold-out bars, quantity steppers and a checkout total
Install Event Speakers
npx shadcn@latest add @charcoal/event-speakersEvent Speakers is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Event Speakers work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.