Sobeys Logo

Accordion Component

This is a fully accessible, modular, and customizable Accordion component with React, Tailwind CSS, and TypeScript. It is split into composable parts

Components Overview

  • Accordion : The main container and provider of shared open/close state.
  • AccordionItem : Wraps each accordion section. Accepts an id to track open state.
  • AccordionHeader : The clickable title. Handles toggle behavior, icons, and accessibility.
  • AccordionPanel : The expandable content area. Supports smooth animation and auto-focus.

Desktop

Accordion Section

iPad

Accordion Section

Mobile

Accordion Section