Playground

Accordion

container

control

Stacked expandable sections — FAQ, settings groups, disclosure lists

Reveal long-form content on demand without leaving the surface

import { Accordion } from "@everydayos/ui";

Usage

Single-open FAQ list; rows are filled `warm-gray-1`, with a `warm-gray-2` toggle button. Question is `editorial-s` Medium, body uses `RichText` for portable text.

<Accordion type="single" collapsible className="flex flex-col gap-1">
  {items.map((item) => (
    <AccordionItem
      key={item.id}
      value={item.id}
      className="rounded-sm bg-warm-gray-1 px-4 py-4"
    >
      <AccordionTrigger className="hover:no-underline">
        <Text size="editorial-s" weight="medium">{item.question}</Text>
        <span className="size-[43px] rounded-2xs bg-warm-gray-2 …" />
      </AccordionTrigger>
      <AccordionContent className="pt-2">
        <RichText value={item.answer} />
      </AccordionContent>
    </AccordionItem>
  ))}
</Accordion>

Composition

Pairs well with

Stack

Card

When to avoid

Only one disclosure section is needed — use Collapsible instead
Switching between peer views — use Tabs instead
Always-visible content — render directly, no accordion wrapper