Navigation and disclosure

Accordion

components/ui/accordion

Independently expandable rows for details and questions.

Each sound is a few oscillators with a fast envelope, built in the browser when it plays.

Yes. The speaker in the top bar mutes every sound, and the choice is remembered.

Yes. Nothing is fetched to play a sound, so they work wherever the page does.

Craft notes

Rows open independently; the body animates on grid rows, so nothing is measured in script
Closed panels are inert, so Tab never lands inside hidden content
The chevron turns half a turn while the open and close puffs mirror each other

Open every row, then close them in the opposite order. The puff rises as a row opens and falls as it closes.

Sounds: expand

Every prop combination the component supports. The chip on each card is the exact props it passes.

Tiles
variant="tiles"
Filled rows for compact interfaces and settings.
Press ? anywhere to see them.
Every action has one.
Plain
variant="plain"
Ruled rows with larger type, for questions and long-form reading.
They are short and soft, and one switch mutes them all.
No. Every sound is synthesized when it plays.
One at a time
single
Opening a row closes the one that was open.
Billed every month.
Billed once a year.
Silent
silent
Mutes this instance only; everything else keeps its sound.
No puff here.