FAQ

The product's common questions as a finished section, from a plain accordion to a full help centre: grouped lists, sticky split ledes, topic rails, searchable boards, chips beside a photograph, and tile grids.

Pro

Fill

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add accordion

Responsive#

Every variant caps its measure so the questions stay easy to scan. The split layouts (variants 3 and 8) stack into one column below lg, dropping the sticky lede above the answers; the grid collapses three columns to two and then one; and the topic rails scroll as a single row rather than wrapping. Variant 10 runs its chips and its photograph as two columns from lg, aligned at the top so an open answer never moves the picture, and stacks below it with the photograph first in a 4/3 crop. The conversation (variant 11) is a single column at every width, the reading pane (variant 12) keeps its rail a column and drops the pane underneath it below lg, and the board (variant 13) steps three columns to two and then one. Resize the preview to confirm the rhythm holds from mobile to desktop.

FAQ#

The component (in /docs/components/accordion) is the installable engine, and /docs/components/faqs is the section layer above it. These are finished compositions built from both: real copy, a chosen layout, and the closing CTA already in place.

FAQ

Variant 1

Variant 2

Variant 3

Variant 4

Variant 5

Variant 6

Variant 7

Variant 8

Variant 9

Variant 10

Variant 11

Variant 12

Variant 13

Installation#

Responsive#

FAQ#

What is the difference between this and the Accordion component?

Which variant should I reach for?

Why do variants 3 and 8 have no separate section heading?

How are the pill questions in variant 10 built?

Is there really no model behind variant 11?

When would I use the reading pane over an accordion?

Can I preview it in another theme?

Which variant is free?