Accordion

Data Display

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Single Mode (Default)

React is a JavaScript library for building user interfaces. It's maintained by Facebook and a community of individual developers and companies.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs.

Single Mode (Collapsible - Can close all)

Vite is a modern build tool that provides fast development and optimized production builds for modern web projects.
Class Variance Authority (CVA) is a utility for creating type-safe variant-based component styling with Tailwind CSS.
shadcn/ui is a collection of beautifully designed components built with Radix UI and Tailwind CSS that you can copy and paste into your apps.

Multiple Mode (Multiple items can be open)

Yes. It adheres to the WAI-ARIA design pattern with proper keyboard navigation and ARIA attributes.
Yes. It comes with default styles that are beautiful and can be easily customized with Tailwind CSS classes.
Yes. It's animated by default with smooth transitions using CSS transitions and transforms.
This item is disabled and cannot be opened.

Toggle Variant

HTML, CSS, JavaScript, React, Vue, Angular, Svelte, and many more frameworks and libraries for building modern web applications.
Node.js, Python (Django/Flask), Ruby on Rails, PHP, Java (Spring Boot), and other server-side technologies.
MySQL, PostgreSQL, MongoDB, Redis, and other database management systems for data storage and retrieval.

In Card Context (First Open Variant)

A design system is a collection of reusable components, guided by clear standards, that can be assembled to build applications.
Component libraries like Material-UI, Ant Design, Chakra UI, and shadcn/ui provide pre-built components to speed up development.
Building custom components allows for complete control over design, functionality, and user experience tailored to specific needs.

Usage Guidelines

When to Use

  • FAQs
  • Settings panels
  • Collapsible content

Accessibility

  • Full keyboard navigation
  • ARIA expanded states
  • Focus management

Performance

  • Height animations optimized
  • Only open content in DOM

Common Mistakes

  • All items collapsed by default
  • Nesting accordions too deep

Frequently Asked Questions

Yes, Accordion supports both single and multiple expansion modes.
Yes, Accordion uses smooth height animations for expand/collapse transitions.

View on GitHub

See the full source code on GitHub

Related Components

View all
Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Card

Container component with header, body, footer composition, variant system including glass morphism effects

Previous

Container

Next

Alert