Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Agenda by Day FAQ Block for React

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 React with Base 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. Focusing a tab selects it, as on the other libraries.

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

Yes. Each panel takes keepMounted and the Accordion hiddenUntilFound, so the other days stay in the page, hidden, and closed answers stay as hidden="until-found".

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. Tab moves from question to question.

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.

  • Pro

    Categorized FAQ

    Topics and filters

    A topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.

  • Pro

    Tabbed Vertical FAQ

    Navigation

    A vertical-tabs FAQ for a transit app: a rail of five topics with an icon and a count each, beside the open topic's accordion, behind a split divider.

  • Pro

    Accordion FAQ

    Accordion lists

    A side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.

  • Pro

    Table of Contents FAQ

    Navigation

    A FAQ for an object-storage service with a sticky table of contents: three topics and their questions in an outline that follows the reader, beside topic bands that each hold an accordion.

  • Pro

    Split View FAQ

    Navigation

    A master-detail FAQ for a sales CRM: a list of eight questions at the start and the chosen answer in a framed panel at the end, with a Next question button.

  • Pro

    Timeline Hero

    Updates and timelines

    A start-aligned hero with a headline, a Shine Button and an outline action over a closing band of four milestone rows on a vertical hairline, shipped, current and planned.

All 100 faq blocks