shadcn.io is not affiliated with official shadcn/ui
Talks Accordion About Block for Vue
The talks of a conference app's team as accordion rows under an Upcoming and Past switch: a title, the event, the kind of talk and when, opening to the abstract, the speaker and a Slides link.
Installation
Overview
A speaking page for Vue with Ark UI, written for Lecternly, a fictional conference app. A compact header has an Upcoming and Past switch at its end, and the chosen list of four talks is a set of accordion rows ruled from rail to rail. A closed row shows the title with the event, a badge for the kind of talk (keynote, panel, workshop or lightning talk) and when; an open one shows the abstract, the speaker, and a Slides link once the talk has happened. The first row of each list is open on load. Both lists share one grid cell with an unseen copy, so switching never moves the page, and the list is the block's last band. It's built from Tabs, Accordion, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages and team pages that want to show what the team talks about without a calendar. The talks and speakers are example data.
FAQ
How do I change the talks?
UPCOMING and PAST at the top of the file are lists of talks: a title, an event, a kind, a speaker, an abstract and how it reads. An upcoming talk also has a date (month and day) for its time element. Keep four in each list so the two panels are about the same height; the first row of each opens on load (OPEN_UPCOMING, OPEN_PAST).
How do the rows behave with a keyboard?
Each row's title is a button inside a heading: Enter or Space opens and closes it, and more than one can be open. Tab moves between the rows.
How does the Upcoming and Past switch work?
They are the library's tabs: one tab stop, the arrow keys move between them, and the list of the chosen tab follows. Both lists, with their first rows open, are stacked unseen under the open one, hidden from assistive technology and inert, so the tallest sets the height and switching never moves the page.
Why do past talks say how long ago and not a date?
A date goes stale on a page nobody edits. Upcoming talks show a month and day in a time element; past ones say how long ago in the words you write in the data. These are fixed text, not computed from today, so update them when you update the list.