Navigation
Accordion
An accordion keeps a long set of answers scannable by showing only their titles until one is asked for. Height eases open while the chevron rolls over, so the expansion reads as one movement rather than a jump. Rows carrying an icon switch into a tile list, which is the shape to use when the items are destinations or categories rather than questions.
npx shadcn@latest add @minflow/accordionWhere to use it
- FAQs, help content, and long settings pages where most rows stay shut.
- Progressive disclosure of detail the user asked for, such as advanced options under a form.
- Never for content the user needs to compare side by side, and never to hide something required to finish the task.
Variations
One open at rest
The default for a short set. Opening the first row shows the reader what a row contains without any of them being clicked.
All closed
For a longer list, where opening one row by default would bury the rest and cost the user their overview.
Tile list
When each row has an icon and reads as a category rather than a question. The chevron turns a quarter and the tiles carry the alignment.