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
Prop | Type | Default | Description |
---|---|---|---|
bg | string | undefined | Background color of the accordion |
textColor | string | undefined | Text color of the accordion |
borderColor | string | undefined | Border color of the accordion |
shadowColor | string | undefined | Shadow color of the accordion |
collapsible | boolean | false | If true, allows all items to be closed |
className | string | '' | 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
<Accordionbg="#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><AccordionItemvalue="item-1"shadowColor="purple"textColor="purple"><AccordionTrigger>Section 1</AccordionTrigger><AccordionContent>Content for section 1</AccordionContent></AccordionItem><AccordionItemvalue="item-2"shadowColor="green"textColor="green"><AccordionTrigger>Section 2</AccordionTrigger><AccordionContent>Content for section 2</AccordionContent></AccordionItem><AccordionItemvalue="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