Question 1

What is the Accordion?

Accepted Answer

shadcn.io's Accordion is a stack of sections, each a trigger that shows or hides its content. It comes with AccordionItem, AccordionTrigger and AccordionContent parts, draws a chevron on each trigger, animates the content open and closed, and handles keyboard navigation between triggers. Each example in this gallery is one small file built from those parts.

Question 2

Are these accordion examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How are these different from the Accordion component itself?

Accepted Answer

The component gives you the parts and the behavior. The examples show what to build with them: FAQs, plus/minus toggles in place of the chevron, toggles at the start of the row, icons and subtitles in the trigger, separate cards, nested levels and forms in sections. You still own the code and change any of it.

Question 4

When should I use an accordion instead of tabs?

Accepted Answer

An accordion when readers scan a list of headings and open the few they need, such as FAQs, or on narrow screens. Tabs when the sections are parallel views of the same thing and readers switch between them. If everything should be read, don't hide it: show it.

Question 5

Which example should I use for an FAQ?

Accepted Answer

The standard accordion with the chevron is the usual choice. The plus/minus examples make the toggle easier to spot, and the card-style ones separate each question. Start with the first question open if it's the one most people ask.

Question 6

How do I build a nested accordion?

Accepted Answer

Put Collapsible rows, or another Accordion, inside AccordionContent. The multi-level examples use collapsibles for the inner level, so each article opens on its own while only one topic is open at a time.

Question 7

How do I let several sections stay open?

Accepted Answer

One section at a time is the default. Each library names the option its own way (multiple on Ark UI and Base UI, type multiple on Radix UI, allowsMultipleExpanded on React Aria), and every example's code uses the right props for the page you're on.

Question 8

Can I replace the chevron with my own icon?

Accepted Answer

Yes. Hide the built-in icon from the trigger's class and put your own icons in the trigger, styled from the trigger's expanded state, as the plus/minus examples do. To move the toggle to the start, reverse the trigger's row or put your icon first.

Question 9

How do I install an accordion example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Accordion component, and Collapsible or Input when the example uses them.

Question 10

How do I open a section from code?

Accepted Answer

Control the accordion: pass the open values and update them in the change handler. Most examples open one section with a default value, so switching to a controlled value is a small change to that prop.

Question 11

Do closed sections stay in the page?

Accepted Answer

It depends on the library: some remove closed content and some keep it hidden. The form examples ask every library to keep closed sections mounted, so typed values survive and every field still submits with the form.

Question 12

How do I change the open and close animation?

Accepted Answer

AccordionContent animates its height from the content's measured size. Change the duration or easing in the accordion file in your project.

Question 13

What are accordion examples built on?

Accepted Answer

shadcn.io's Accordion, with Collapsible and Input in some examples, styled with Tailwind CSS and Lucide icons. In React it's built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 14

Are accordion examples accessible?

Accepted Answer

Yes. Each trigger is a button that reports whether its section is expanded and which content it controls, and Enter or Space toggles it. Icons are decorative and hidden from screen readers, so the title is the trigger's name.

Question 15

Do the examples work with server rendering?

Accepted Answer

Yes. They render on the server with the default sections open, and the triggers become interactive in the browser.

Question 16

Which Tailwind CSS version do the examples use?

Accepted Answer

Tailwind CSS v4. The classes are standard utilities and theme tokens such as bg-background and text-muted-foreground, read from your theme's CSS variables.

Accordion Examples

Accordion Form with Icon Sections

Accordion Form with Plus/Minus Toggle

Multi-Level Accordion with Icons

Multi-Level Accordion with Left Plus Trigger

Multi-Level Accordion with Plus/Minus Trigger

Multi-Level Nested Accordion

Accordion with Category Icons

Accordion with Icons and Plus/Minus Toggle

Accordion with Left Chevron

Accordion with Left Plus/Minus Toggle

Accordion with Plus/Minus Toggle

Full Featured Accordion

More component examples

Aspect Ratio

Card

Collapsible

Scroll Area

Separator

Alert

Alert Dialog

Avatar

Accordion examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every accordion example. One prompt away.