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

<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