Love This UI? Help It Grow and Reach More Developers Worldwide — Check out

Retro Style Accordion

A retro-style accordion component that brings a nostalgic, vintage feel to your user interface. It features a classic design with hard shadows and a distinct, old-school aesthetic, perfect for applications aiming for a retro look.

Yes! It uses the same bright green, black borders, and hard shadow to create a consistent look and feel. The hover and press effects are adapted for the accordion trigger.
It's built with accessibility in mind. It uses button elements for triggers and ARIA attributes like aria-expanded and aria-controls.
Absolutely. You can put any React components or JSX inside the AccordionContent.

Usage

To use the retro style accordion, import the necessary components and structure them as shown below.

Loading...

Components

The accordion is composed of several components that work together:

  • Accordion: The main wrapper that provides context and state management for the accordion group.
  • AccordionItem: A container for each individual collapsible section. It requires a unique value prop.
  • AccordionTrigger: The button element that the user clicks to open or close an AccordionItem.
  • AccordionContent: The container for the content that is revealed when an AccordionItem is open.