Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Sortable FAQ Block for React Aria

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.

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 sortable FAQ for React with React Aria. A narrow start column holds the title, a sentence and a pill-shaped control with three choices, Most asked, Newest and A to Z; the eight questions sit in the end column behind a split divider that runs from the page's top rule to the block's end. Choosing a sort moves the rows and says so in words under the control. Each row carries its key: how often it's asked, such as "2.1k asks", and a "New" badge on the latest additions. Nothing changes height. On a phone the header stacks above the rows and the control goes full width. It's built from Accordion, Segment Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help centres where popularity, freshness or alphabet each help a different reader.

FAQ

How do I change the questions and their keys?

Edit QUESTIONS at the top of the file: each entry has an id, the question and its answer, asks (how often it was asked, a number) and order (its place in the order the questions were written, higher is newer). NEW_FROM is the order from which a question carries the "New" badge. SORTS holds the three choices; add one by adding a case to sorted.

How does the sorting work?

sorted returns a copy of the questions in the order the choice asks for: by asks high to low, by order high to low, or by the question's text with the browser's alphabetical order. The rows are the same elements in a new order, so a row you opened stays open after the sort.

What do screen readers hear?

The control is a group named "Sort the questions" with three options, and the line under it, "Sorted by A to Z", is a polite status that is read out when you choose. Each question is a button inside its own h3 under the section's h2, and the count of asks is part of the button's name.

Are the closed answers in the page's markup?

Yes. React Aria keeps every closed panel in the markup as hidden="until-found".

Where do the numbers come from?

They're sample counts in the data: wire asks to your own help-centre analytics, or drop the figure and sort by order alone. They're written with compact, which turns 2140 into "2.1k"; in right-to-left layouts the number keeps its reading order.

How does it work with a keyboard?

Tab moves from the control to the first question and on down the rows; Enter or Space opens one. The control is a radio group: arrow keys move between its three choices and choose as they go.

All 100 faq blocks