Accordion

A customizable, pixel-art styled accordion component for organizing content into collapsible sections. Supports both classic accordion mode (one section open at a time) and independent sections mode (multiple sections can be open simultaneously).

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	true	If true (default), only one item can be open at a time (classic accordion). If false, multiple items can be open simultaneously (independent sections).
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

Collapsible Mode:

Section 1

Content for section 1

Section 2

Content for section 2

<Accordion
  bg="#fefcd0"
  textColor="black"
  borderColor="black"
  shadowColor="#c381b5"
  collapsible={true}
>
  <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:

Section 1

Content for section 1

Section 2

Content for section 2

Section 3

Content for section 3

Independent Sections

<Accordion collapsible={false}>
  <AccordionItem value="item-1">
    <AccordionTrigger>FAQ Item 1</AccordionTrigger>
    <AccordionContent>With collapsible=false, multiple items can be open at once.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>FAQ Item 2</AccordionTrigger>
    <AccordionContent>Each item toggles independently of others.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>FAQ Item 3</AccordionTrigger>
    <AccordionContent>Perfect for FAQ sections or documentation.</AccordionContent>
  </AccordionItem>
</Accordion>

Preview:

FAQ Item 1

With collapsible=false, multiple items can be open at once.

FAQ Item 2

Each item toggles independently of others.

FAQ Item 3

Perfect for FAQ sections or documentation.