Accordion
Accordion is a neobrutalist React component from Cruise UI. Sections that open and close, one or several at a time: FAQs, details, settings. Install it with npx shadcn@latest add @cruiseui/accordion.
Install
Terminal
npx shadcn@latest add @cruiseui/accordionFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Same day in Lagos for orders before 12 noon; 2–3 days elsewhere.
import { CruiseAccordion } from "@/components/cruise/accordion";
const faqs = [
{
value: "delivery",
title: "How long does delivery take?",
content: "Same day in Lagos for orders before 12 noon; 2–3 days elsewhere.",
},
{
value: "payment",
title: "How can I pay?",
content: "Card, bank transfer or USSD. You can also pay on delivery in Lagos.",
},
{
value: "refunds",
title: "Can I get a refund?",
content: "Yes, within 7 days if the item is unused. We refund to your original payment method.",
},
];
export default function AccordionExample() {
return <CruiseAccordion items={faqs} defaultValue={["delivery"]} />;
}
<div class="accordion">
<details class="accordion-item" open>
<summary class="accordion-trigger"><span>How long does delivery take?</span><span class="accordion-icon" aria-hidden="true"></span></summary>
<div class="accordion-panel"><div class="accordion-content">Same day in Lagos for orders before 12 noon; 2–3 days elsewhere.</div></div>
</details>
<details class="accordion-item">
<summary class="accordion-trigger"><span>How can I pay?</span><span class="accordion-icon" aria-hidden="true"></span></summary>
<div class="accordion-panel"><div class="accordion-content">Card, bank transfer or USSD.</div></div>
</details>
</div>
<!-- One open at a time: give the <details> the same name="faq" attribute. -->Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Long pages of questions or details where people look for one answer (FAQ).
When not to
Content everyone needs to read (just show it). Switching views (use Tabs).
Props
CruiseAccordion
| Prop | Type | Default | Description |
|---|---|---|---|
items | CruiseAccordionItem[] | — | — |
multiple? | boolean | false | Let several panels be open at once. |
defaultValue? | string[] | — | Values of the panels open at first. |
className? | string | — | — |
Accessibility
- Each header is a real button with aria-expanded and aria-controls.
- Enter and Space toggle; the open state shows as − / +, not colour alone.
- No height animation under reduced motion.