Accordion

A customizable, pixel-art styled accordion component for organizing content into collapsible sections.

Basic Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'pixel-retroui';
function App() {
return (
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content for section 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Section 2</AccordionTrigger>
<AccordionContent>Content for section 2</AccordionContent>
</AccordionItem>
</Accordion>
);
}

Props

PropTypeDefaultDescription
bgstringundefinedBackground color of the accordion
textColorstringundefinedText color of the accordion
borderColorstringundefinedBorder color of the accordion
shadowColorstringundefinedShadow color of the accordion
collapsiblebooleanfalseIf true, allows all items to be closed
classNamestring''Additional CSS classes to apply to the accordion

Custom Accordion

Customize your accordion's appearance by selecting a preset theme or creating your own color scheme.

Theme: pop

pop
Content for section 1
Content for section 2
<Accordion
bg="#fefcd0"
textColor="black"
borderColor="black"
shadowColor="#c381b5"
>
<AccordionItem value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content for section 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Section 2</AccordionTrigger>
<AccordionContent>Content for section 2</AccordionContent>
</AccordionItem>
</Accordion>

Additional Examples

Individual Custom Props

<Accordion>
<AccordionItem
value="item-1"
shadowColor="purple"
textColor="purple">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content for section 1</AccordionContent>
</AccordionItem>
<AccordionItem
value="item-2"
shadowColor="green"
textColor="green">
<AccordionTrigger>Section 2</AccordionTrigger>
<AccordionContent>Content for section 2</AccordionContent>
</AccordionItem>
<AccordionItem
value="item-3"
shadowColor="blue"
textColor="blue">
<AccordionTrigger>Section 3</AccordionTrigger>
<AccordionContent>Content for section 3</AccordionContent>
</AccordionItem>
</Accordion>

Preview:

Content for section 1
Content for section 2
Content for section 3