Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Accordion FAQ Features Block for Ark UI

A features section for an API gateway told as six capability questions in an accordion beside a sticky side header, each answer a sentence and a small drawing of the capability at work.

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 features section for React with Ark UI, built around questions a buyer would ask. A compact header carries a link to the docs; under it an accordion band runs from rail to rail with six capability questions, each row ending in its headline figure (three attempts, a 429 on overflow, a 5% canary). A row opens one at a time to a sentence beside a drawing of the thing at work: retries on a timeline, a concurrency meter, a canary split, the checks an API key passes, a latency trace and a cache hit ratio. It's an accordion, a badge and the Guides line kit, with your theme's tokens for every colour and no button other than the link. For gateways, developer platforms and any product whose features are easiest to explain as "can it...?".

FAQ

How do I change the questions and drawings?

Edit CAPABILITIES at the top of the file. Each entry has a question, an answer, an icon, a list of chips (short pills) and a list of parts (the segments of a bar, each a name and a number whose width follows it). An entry with no chips or no parts simply leaves that half of the drawing out, so one capability can show pills, another a bar and another both.

Is this a FAQ block?

No. The FAQ blocks answer objections in words. This one explains features: every question is something the product does, and every answer shows it with a drawing. The drawings are decoration and are hidden from assistive technology, so each answer's sentence says everything the drawing does.

Can more than one row be open?

No, one row opens at a time, and the first is open when the page loads. Opening another closes it. To allow several at once, pass the accordion's multiple mode. Add multiple to the accordion.

How does it work from the keyboard?

Tab reaches each question, Enter and Space open it, and the Up and Down arrows move between questions. Each question is a button inside a level-three heading under the section's level-two heading, so a screen reader's heading list reads as an outline of the capabilities.

What moves, and what happens with reduced motion?

The header and the rows fade up once when the page loads, and the answers open with the accordion's own height transition. With reduced motion the fade is off and the section simply appears.

How does it fit on a phone?

The rows are as wide as the screen; the figure at the end of each row hides, and the answer's sentence and drawing stack. The drawings wrap their pills and legends. Nothing scrolls sideways at 320 pixels.

All 170 features blocks