Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Compact FAQ Block for Svelte

A dense FAQ for ski-lift passes: ten tight accordion rows with small type and one-sentence answers in a narrow framed list, a chevron at the start of each row.

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 compact FAQ for Svelte with Ark UI. A short centred title and sentence sit above a narrow centred frame, whose lines run a little past its corners with + marks, holding ten accordion rows. The rows are tight (small type, little padding) and each answer is one sentence, so all ten questions fit in about one screen. A small chevron at the start of each row points along the line, and turns to point down on the open row. 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 and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For pass, ticket and plan pages where visitors scan for one specific rule.

FAQ

How do I change the questions?

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, kept to a single sentence so the rows stay compact. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. Ten fit in about one screen. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Are the closed answers in the page's markup?

Yes. Each Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all 10, and closing an answer doesn't remove it.

How does it work with a keyboard and a screen reader?

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every question. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

How does the chevron work in a right-to-left layout?

Two chevrons sit at the start of each row and one shows at a time: a closed row shows the one that points along the line, which flips to point the other way in a right-to-left layout, and an open row shows the one that points down, which needs no flip. They are decorative; the button's expanded state tells assistive technology which way the row is.

What moves, and what happens with reduced motion?

The header and the list fade up once when the page loads, with CSS transitions, and the chevron changes as a row opens. With reduced motion the entrances are off. The answers also open and close at once, with no height animation.

How does it fit on a phone?

The frame takes the width between the rails. A question that doesn't fit wraps to a second line beside its chevron, answers stay at the same small size, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks