Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Topic Select FAQ Block for React

A short FAQ for a bike-share with a topic Select at the end of its header: choose a topic and its questions fill the rows below, or choose All topics for all twelve.

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

A short FAQ for React with Base UI. A header holds the title and a sentence at its start and a Select at its end that picks a topic; below it, in hairline rows, are the questions of that topic, four of twelve to begin with. The sentence says how many are showing, and "All topics" lists every question with its topic as a badge in front. The list keeps a floor height, so switching topics doesn't collapse the page, and on a phone the Select goes full width under the title. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Select, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For support pages with a handful of topics and too many questions to list at once.

FAQ

How do I change the topics and questions?

Edit TOPICS and QUESTIONS at the top of the file. A topic is a label and a value, the first one, "All topics", being the value all; each question names its topic by that value. FIRST_TOPIC says which one is chosen on load: the list starts short, and the count in the sentence reads from the arrays.

How does the Select work?

It's our Select with a "Topic" label inside its trigger, so the chosen value reads "Topic Rides". Choosing a topic swaps the rows at once and the rows start closed. Arrow keys and typing move through the options, Enter chooses and Escape closes the list, as in any Select.

What do screen readers hear?

The trigger is named "Topic" and announces its value. When the choice changes, the sentence in the header, "Showing 4 of 12 questions", is a polite status, so the new count is read out. Each question is a button inside its own h3 under the section's h2.

Does the page jump when I change topic?

Not when you move between topics of the same size: the list has a floor height of four rows. Choosing All topics shows twelve rows, so the block grows by the eight extra questions you asked for, and going back shrinks it again.

Are the closed answers in the page's markup?

Yes, for the chosen topic. The Accordion takes hiddenUntilFound, so those answers stay in the markup as hidden="until-found". Other topics' questions aren't in the markup until chosen.

Can I move between questions with the keyboard?

Tab moves from the Select to the first question and on down the rows; Enter or Space opens one.

  • 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

    Multi Select FAQ

    Topics and filters

    A topic-chip FAQ for an outdoor-gear rental: any number of chips can be on, and the list shows the union of their questions, with a live count.

  • Pro

    Live Search FAQ

    Search

    A searchable FAQ for a notes app: a start-aligned header, a band with a full-width search field and a live count, and ten questions that filter as you type, open every match and mark the matched words.

  • Pro

    Sortable FAQ

    Topics and filters

    A FAQ for a garden-planner app whose questions really sort: a three-way control in a narrow start column reorders eight rows by most asked, newest or A to Z.

  • 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

    Difficulty FAQ

    Topics and filters

    An FAQ for a coding school where every question has a level: a three-bar glyph and a badge on each row, and a level filter with counts beside the list.

All 100 faq blocks