shadcn.io is not affiliated with official shadcn/ui
Speaking Events Team Block for Solid
Upcoming and Past tabs over talk rows led by a calendar tile, each opening to topics, an abstract and, for past talks, a Slides link; Upcoming ends in an invitation to book a speaker and Past is a two-column archive.
Installation
Overview
A speaking section for Solid with Ark UI, written for Penrith & Vane, a fictional dev-tools studio. A header says how many talks are coming up and how many are behind the team; under it a tab band with a hairline and + marks switches between Upcoming (3) and Past (6). Each talk is a row rail to rail that opens like a drawer: closed, a calendar tile (the month over the day), the title, the speaker's initials and name, the conference and city, and a badge for the kind (Talk, Keynote or Workshop); open, its topics as chips, an abstract, the speaker's role and, for a past talk, a Slides link. The Upcoming tab ends in a band that invites you to book a speaker. Past is a two-column archive from lg; on a phone it shows three talks and a Show all 6 button. The two tabs share one height, so switching never moves the page. Dates are a month and a day with no year, fixed in the data. It is built from Tabs, Collapsible, Badge, Button and Guides with your theme's tokens. The talks, conferences and people are made up for the example.
FAQ
How do I change the talks?
Edit UPCOMING and PAST at the top of the file. A talk is a title, a speaker and role, an event and city, a kind, a month (1 to 12) and a day, its topics and an abstract. The tile and the machine-readable date (MM-DD) come from the month and the day; the tab counts come from the lists. A past talk's Slides link is added by the row, so point it at your slides.
Why is there no year, and how do Upcoming and Past stay true?
A year in the data would go stale, and the block doesn't read the clock, so it never decides by itself which talks are over. You move a talk from UPCOMING to PAST when it happens; until then the tab it is in is the truth.
How do the rows work with a keyboard and a screen reader?
Each title is a heading with a button inside it: Tab reaches each row, Enter or Space opens and closes it, and the open state is announced. The plus becomes a minus when open. The calendar tile is a time element, so the date is read as a date.
A closed row keeps its topics and abstract in the page, hidden until it opens.
How do the tabs work?
They are tabs: the arrow keys move between Upcoming and Past, and Home and End jump to the ends.
Why does the page keep its height when I switch tabs?
The open list and an unseen copy of both lists share a grid cell, so the cell is always as tall as the taller one. Upcoming's closing band stretches to fill what its three rows leave, and holds the invitation. Opening a row, or Show all on a phone, does grow the block, because that is what you asked for.
How does it fit on a phone?
Each row puts the calendar tile on its own line with the plus at the end, then the title and the speaker under it, so the title keeps its full width. Past shows three talks and a Show all 6 button, a disclosure that says whether the list is expanded and keeps its label. The tab band scrolls if its tabs don't fit. Nothing scrolls sideways at 320 pixels.