An expandable/collapsible content panel with corner decoration and glow effects. Matches the FAQ section style on the landing page.
Default accordion with single item expanded at a time. Click on a header to expand/collapse. Features corner dots, left/right borders, and mouse-follow glow effect on hover.
Track expanded index externally using onExpandedChange. Current expanded index: 0
Use DesignAccordionSingle for standalone expandable sections.
Use for frequently asked questions
{ items: "AccordionItem[]" }Standalone expandable section
{ title: "string", children: "ReactNode" }import { DesignAccordion, DesignAccordionSingle } from "@/components/ui/design-accordion";
// Accordion with multiple items
const items = [
{ id: "1", title: "Question 1", content: "Answer 1" },
{ id: "2", title: "Question 2", content: "Answer 2" },
];
<DesignAccordion
items={items}
defaultExpandedIndex={0}
/>
// With controlled state
const [expandedIndex, setExpandedIndex] = useState(0);
<DesignAccordion
items={items}
defaultExpandedIndex={expandedIndex}
onExpandedChange={setExpandedIndex}
/>
// Single standalone item
<DesignAccordionSingle title="Click to expand">
Content that can be expanded or collapsed.
</DesignAccordionSingle>
// Controlled single item
const [expanded, setExpanded] = useState(false);
<DesignAccordionSingle
title="Controlled accordion"
expanded={expanded}
onExpandedChange={setExpanded}
>
Controlled content.
</DesignAccordionSingle>| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | required | Array of items with id, title, and content |
| defaultExpandedIndex | number | 0 | Initially expanded item index |
| onExpandedChange | (index: number) => void | - | Callback when expanded index changes |
| className | string | - | Additional CSS classes |
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Header text for the accordion |
| children | ReactNode | required | Content shown when expanded |
| defaultExpanded | boolean | false | Initially expanded state |
| expanded | boolean | - | Controlled expanded state |
| onExpandedChange | (expanded: boolean) => void | - | Callback when state changes |
| className | string | - | Additional CSS classes |
interface AccordionItem {
/** Unique identifier for the item */
id: string;
/** The title/question displayed in the header */
title: string;
/** The content/answer displayed when expanded */
content: React.ReactNode;
}