arca-ui

Accordion

Fine Clay style accordion with crisp borders and subtle shadows.

Basic

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/themes/clay-dough/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Fine Clay design?</AccordionTrigger>
    <AccordionContent>
      A tactile system with crisp borders and restrained shadows.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Color Variants

With Icons

Multiple Mode

Multiple items can be open simultaneously.

Multiple items can be expanded at the same time for comparison.

Import components and use as shown in examples.

Ghost Variant

Minimal visual weight for embedded content.

FAQ Example

Rich Content

Disabled Items