arca-ui

Accordion

Stacked accordion cards with hard shadows. Each item is a separate card, creating a clear visual hierarchy like index cards in a filing system.

Basic Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/themes/hard-edge-stack/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Hard-Edge Stack?</AccordionTrigger>
    <AccordionContent>
      A neo-brutalist system with sharp edges and hard shadows.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Items Open

FAQ with Icons

Settings Panel

Order Tracking

Tracking Number: 1Z999AA10123456784

Last update: Package departed from distribution center

Two-Column Layout

Getting Started

Advanced

Colored Variants

Rich Content

Default Expanded

You can set a default value to have an accordion item expanded when the page loads. This is useful for highlighting important information or providing immediate context to users.