Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Post-Linked Accordion FAQ Blog Block for React

Reader questions answered by posts: a single-open accordion of six how-things-work questions, each answer ending in a linked post chip with the post's title and reading time.

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 reader-questions block for React with Base UI, written for Howwick, a weekly about how ordinary things work. In a split behind a divider, the end holds six questions as a single-open accordion that runs from rail to rail, the first open on load, one open at a time. Each answer is two plain sentences and ends in a post chip: a link with the post's title and its reading time, for the reader who wants the whole story. The start holds the header and, pinned to the foot, an invitation to send a question with an outline link. It is built from Accordion, Button and Guides. For a blog whose FAQ should lead into its own posts rather than stand alone.

FAQ

How do I change the questions and the posts?

Edit QUESTIONS: an id, the question, a short answer and post (href, minutes, title). Keep answers to a couple of sentences; the chip is where the long version lives. The block carries no dates, so nothing goes stale.

Can more than one answer be open?

No. Opening a question closes the open one, and the first question is open on load. To allow several, switch the accordion to its multiple mode on your base.

How does it work with a keyboard?

Every question is a button inside a heading, so Tab moves through the questions and the open answer's chip, and Enter or Space opens a question. This accordion does not move between questions with the arrow keys; use Tab.

Are closed answers in the page for search and screen readers?

No. Closed panels are removed from the page until opened.

How does it fit on a phone?

The header comes first, then the questions rail to rail, then the invitation under them. The chip wraps its title onto two lines if it must.

Does it work right to left?

Yes. The split and the questions mirror, the plus mark rotates in place, and reading times are isolated with bdi.

  • Pro

    Single Open Accordion Blog

    Post lists

    Four dev notes as a single-open accordion: each row shows its number, title, date and reading time, and the open row reveals the dek, the byline with its category and a Read post link.

  • Pro

    Knowledge Base Tree Blog

    Topics and indexes

    A help centre's articles as a working tree of topics beside a preview of the picked article: its topic, title, two-sentence summary, last update and an Open article link.

  • Pro

    Related Posts Shared Topics Blog

    Card grids

    A More like this strip: three related posts as cells on shared hairlines, each showing which of the current post's three topics it shares, with a tick on the shared ones and a count such as 2 of 3 topics in common.

  • Pro

    Recommendations Picker Blog

    Reading tools

    A Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.

  • 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

    Scroll Panel Glossary Blog

    Topics and indexes

    A glossary in a fixed-height scroll panel: sticky letter headings, a part-of-speech tag per term, See also buttons that open a hover card and scroll to the term, and a posts link.

All 100 blog blocks