Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Card Grid FAQ Block for React Aria

A static FAQ grid for a seed shop: six questions with their answers on show, in cells that share hairlines, each with an icon tile and a topic tag.

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 card-grid FAQ for React with React Aria. A centred title and one sentence sit above a grid of six cells that share hairlines: three across on a desktop, two on a tablet and one on a phone. Each cell holds an icon in a muted tile, a topic tag, the question as a heading and its whole answer, so a visitor can scan every answer at once and nothing has to be opened. The grid hangs from a rule with + marks that meets the page's rails. 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 Guides and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages and shops where there are only a few questions and every one deserves to be read.

FAQ

How do I change the questions?

Edit CELLS at the top of the file: each entry is an id, a topic for the tag, an icon from Lucide, the question and its answer, one to three sentences. Keep the count a multiple of six: the grid is three across on a desktop and two on a tablet, so six fills every row, and any other count leaves an empty cell where the border colour shows through.

Why does nothing open?

The grid is the feature: every answer is on the page, so a visitor reads it without a click and a search engine sees it without any scripting. If your list is long or its answers run past three sentences, use one of the accordion FAQ blocks instead, which keep the page short.

How is it read by a screen reader?

The cells are a list, and each question is an h3 under the section's h2, so a headings list shows all six. The icon tiles are decorative and hidden from assistive technology; the topic tag is read as text. There are no controls, so Tab passes straight through.

Does it follow my theme?

Yes. Every colour is a theme token: the tiles are muted, the tags are outline badges and the cells are your background, so the grid is light on a light page and dark on a dark one, in every preset. Nothing uses the primary colour.

What moves, and what happens with reduced motion?

The header and the grid fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the section simply appears.

How does it fit on a phone?

The cells stack in one column, divided by hairlines, with the same padding. Questions and answers wrap, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks