Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Minimal FAQ Block for Svelte

A type-forward FAQ for a stationery brand: six questions in large type with their answers on show in a definition list, no cards or row lines, and one contact link.

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 minimal FAQ for Svelte with Ark UI. Under the page's top rule, a title and one sentence sit on a narrow centred column, followed by a rule with + marks and six questions in a definition list: each question in large medium-weight type and its answer in muted text beneath it, all on show, divided by white space alone. There are no cards, icons or row lines: the only lines are the page's rails and the rule under the header. A ghost link closes the column. 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 Button, with CSS transitions for the entrance and your theme's tokens for every colour. For brand pages and small shops where the words should do all the work.

FAQ

How do I change the questions?

Edit ENTRIES at the top of the file: each entry is an id, the question and its answer, one to three sentences. Six to eight suit the layout. With no lines between them, more than about eight start to read as a wall of text, and an accordion serves a longer list better.

Why a definition list, and not headings?

Every answer is on show, which is what a definition list is for: each question is a term and its answer is the description, so a screen reader pairs them. HTML doesn't allow headings inside a term, so the questions don't appear in a headings list; the section's h2 still does.

Does it follow my theme?

Yes. It uses only your foreground, muted foreground and border colours, so it is light on a light page and dark on a dark one, in every preset.

What moves, and what happens with reduced motion?

The header and the list 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 column keeps its padding from the rails and the type steps down a size. Questions and answers wrap, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks