shadcn.io is not affiliated with official shadcn/ui
Talk Archive Public Speaker Profile Block for React
A public speaker profile with a talk archive you narrow by topic: four topic buttons keep only talks that carry all of them, the people reached are counted from the rows, and a fee list ends in a local enquiry.
Installation
Overview
Let an organiser find the talk that fits, with this speaker profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the speaker: initials, name, role, place and a badge with the talks and the people in the rooms. A group of four Toggle Group buttons names the topics, each with the number of talks that carry it; pressing several keeps only the talks that carry all of them. The other talks stay in their rows, softened, so the table never moves, and a line that is always there offers to clear the topics when none fits. The talks are a native table with the event, the year and the people, folding the event under the title on a phone, and the count of talks and of people is worked out from the rows shown. The fees are a short Data List, and the foot, ruled by Guides, holds a polite status line beside the one Shine Button, a local enquiry. The speaker, the events and every figure are invented samples. For a speaker bureau, a conference page or any profile that sells talks by topic.
FAQ
How do I fill it with my own talks?
Edit TOPICS and TALKS at the top: each talk has a title, an event, a year, the people in the room and the topics it carries. The counts on the buttons, the totals and the status line are all worked out from those rows, so nothing is typed twice. Replace the fee list in FEES with your own.
Does pressing two topics show talks with either one, or both?
Both. A talk stays at full weight only if it carries every topic that is pressed, so each extra topic narrows the list. With none pressed every talk shows. When nothing carries the whole set, a line says so and a Clear topics button puts the list back.
Why are the other talks softened instead of removed?
So the panel keeps its height and nothing jumps under the pointer. The softened rows are taken out of the tab order, and the status line states the result in words (for example 3 of 9 carry all 2), so the meaning never rests on tone alone.
What stays local in the demo, and how do I wire it for real?
Everything. The Enquire button only writes a line in the status region and sends nothing, and the talks are typed examples. In your own app post the enquiry from the button's click, with the talk topics that are pressed, and show the server's answer in the same status line.
Is it accessible, and how does it look on a phone?
The buttons are a named group with a visible count on each, the table has a caption and row headers, and the status line is a polite live region present from the start. On a phone the topic buttons scroll sideways, the event and year fold under each title, and the status and the button stay pinned to the bottom of the screen. Counts and names keep their reading order in a right-to-left page.