Apple Accordion
Accordion whose items morph from pills into cards, inspired by Apple’s product pages.
Features
- Each item morphs from a pill into a card while the others make room.
- Up and down buttons step through items without closing the card.
Installation
pnpm dlx shadcn@latest add @ncdai/apple-accordion
Usage
import {
AppleAccordionClose,
AppleAccordionContent,
AppleAccordionItem,
AppleAccordionList,
AppleAccordionNext,
AppleAccordionPrevious,
AppleAccordionRoot,
AppleAccordionTrigger,
AppleAccordionTriggerIcon,
} from "@/components/apple-accordion"<AppleAccordionRoot>
<AppleAccordionPrevious />
<AppleAccordionNext />
<AppleAccordionList>
<AppleAccordionItem value="display">
<AppleAccordionTrigger>
<AppleAccordionTriggerIcon />
Display
</AppleAccordionTrigger>
<AppleAccordionContent>
<p>Brighter, with deeper blacks.</p>
</AppleAccordionContent>
</AppleAccordionItem>
</AppleAccordionList>
<AppleAccordionClose />
</AppleAccordionRoot>Items must be direct children of AppleAccordionList. Use value and onValueChange to show matching media beside the list.
Composition
Use the following composition to build an AppleAccordion
AppleAccordionRoot
├── AppleAccordionPrevious
├── AppleAccordionNext
├── AppleAccordionList
│ └── AppleAccordionItem
│ ├── AppleAccordionTrigger
│ │ └── AppleAccordionTriggerIcon
│ └── AppleAccordionContent
└── AppleAccordionCloseAPI reference
Every part except AppleAccordionTriggerIcon accepts a render prop to change its element.
AppleAccordionRoot
Prop
Type
AppleAccordionItem
Prop
Type
Data attributes
| Attribute | Element | Present when |
|---|---|---|
data-open | AppleAccordionRoot | Any item is open. |
data-open | AppleAccordionItem | The item is open. |
aria-disabled | AppleAccordionPrevious, AppleAccordionNext | No item in that direction. |
Accessibility
- Focus moves into the open card, and Escape or Close returns it to the pill.
- With
prefers-reduced-motion, cards resize instantly and content only fades.
