Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Agenda by Day FAQ Block for Vue

A conference FAQ with the agenda beside the questions: tabs for three days over a time column of sessions, and six questions about tickets and getting there behind a split divider.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An FAQ for Vue with Ark UI. Under a start-aligned header, line tabs for the three days sit over a time column of sessions, each with its time, title and room, at the start; six questions about tickets, travel and access sit in hairline rows at the end, behind a split divider that meets the rule above. Every day's panel shares one height, so switching days never moves the questions, and on a phone the tabs scroll sideways and the agenda stacks above the rows. No date is printed: the days are Day 1 to Day 3 and the times are venue time. It's built from Tabs, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For conferences, festivals and workshops whose attendees ask what's on and how to get in.

FAQ

How do I change the agenda and the questions?

Edit DAYS at the top of the file: each day has an id, a label and its sessions (an id, a time, a title and a room). Add a day by adding an entry: its tab and panel follow. The panels share a minimum height of 20 rem, enough for five sessions; raise it if a day has more. QUESTIONS holds the rows on the right.

How do the tabs work?

They're a real tab list named "Conference days": the arrow keys move between them (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open day's list. The tab list scrolls sideways when it doesn't fit.

Are the other days and the closed answers in the page's markup?

Yes. The Tabs and the Accordion take lazyMount={false} and unmountOnExit={false}, so every day and every answer renders from the start, hidden until it's shown.

Can I move between questions with the keyboard?

Tab moves from the day tabs into the agenda, then through the questions; Enter or Space opens one. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

How does it fit on a phone?

Below the lg breakpoint the agenda stacks above the questions, the tabs scroll sideways and the rows run from rail to rail under a rule with + marks. Times keep their column at 320 pixels and long titles wrap.

Why are there no dates?

So the block never goes stale: the tabs say Day 1 to Day 3 and the times are venue time. If you want dates, put them in each day's label, and remember to change them for next year.

All 100 faq blocks