Shadcn Accordion Components

Shadcn Accordion Component

The Shadcn Accordion is a vertically stacked list of headings that each expand to reveal a section of content. It is the standard way to fit a lot of information into a small space without hiding it behind extra pages: FAQs, product details, settings groups and filter panels all use it.

From FAQ lists to stacked settings panels, each accordion here is built with shadcn/ui, React and Tailwind CSS. Each one works with both Radix UI and Base UI primitives. The collection goes from a borderless FAQ list to stacked cards, subtext previews and nested questions, and every React accordion here supports dark mode and installs with the shadcn CLI.

What is the Shadcn Accordion Component?

An accordion is a disclosure pattern: every item has a trigger button and a content panel. Clicking the trigger, or pressing Enter or Space while it has focus, opens the panel and, in single mode, closes the one that was open before. The open state is announced to screen readers, so the pattern stays accessible even though most of the content is hidden.

The shadcn/ui version is unstyled at the primitive level and styled with Tailwind CSS classes in your own code. That means the border, the chevron, the spacing and the open animation are all regular classes you can change, not theme settings you have to override.

Anatomy of the Shadcn Accordion

12 Shadcn Accordion Variants

Each accordion variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A borderless FAQ style accordion with a chevron on the right and dividers between items, ready for pricing or support questions.
• Plus icon: Replaces the chevron with a plus sign that turns into a minus when the item opens. One version keeps the icon on the right, the other puts it in front of the title.
• Icon on the left: Moves the chevron in front of the title and indents the panel text so it lines up with the heading, a good fit for narrow sidebars.
• With icons: Adds a leading icon to each trigger so users can scan sections by meaning before reading the titles.
• With subtext: Shows a short description under every title, giving a preview of the content while the item is still closed. A second version adds a circled icon next to the title.
• Stacked: Every item is a separate rounded card with a gap between them, with the chevron either on the right or on the left.
• Bordered: Items share one continuous border with rounded outer corners, so the whole accordion reads as a single grouped block.
• Multiple items: Each accordion panel holds its own list of nested collapsible questions, with the first section open on load. Useful for grouped FAQs with sub topics.
• Active state: Stacked cards where the first item is open by default and the open item gets a muted background, so users always see where they are.

How to Install the Shadcn Accordion Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a accordion variant by its name:

npx shadcn@latest add @shadcnuikit/accordion1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Accordion Component

Import the four parts from your components/ui folder and give every item a unique value. Use defaultValue to open an item on first render.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function Faq() {
  return (
    <Accordion type="single" collapsible defaultValue="shipping">
      <AccordionItem value="shipping">
        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
        <AccordionContent>
          Orders ship within 2 business days.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Can I return an item?</AccordionTrigger>
        <AccordionContent>
          Yes, within 30 days of delivery.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Why Use the Shadcn Accordion Component

• Less scrolling: Long pages become a short list of titles, and users open only what they need.
• Accessible out of the box: Keyboard support, focus handling and ARIA attributes come from the primitive, so you do not have to wire them yourself.
• Fully styleable: Every part accepts a className, and the open state is exposed through data attributes you can target with Tailwind CSS.
• SEO friendly FAQs: The content is regular HTML, so questions and answers can be indexed and paired with FAQPage structured data.
• Works in any React app: Use it in Next.js, Vite, Remix or any React project that runs Tailwind CSS.

Common Accordion Use Cases

• FAQ sections: The most common use: pricing, shipping and support questions on landing pages.
• Product details: Specifications, materials and care instructions on e-commerce product pages.
• Settings and forms: Group related fields into sections so a long settings page stays readable.
• Filter panels: Collapsible filter groups for price, size or category in a sidebar.
• Documentation: Expandable navigation groups and optional details in docs and help centers.
• Mobile navigation: Nested menu sections that expand in place on small screens.

Customizing the Shadcn Accordion

Style the open item with the data-state attribute and remove the default border or rounding of the root with regular Tailwind classes. The chevron is built into AccordionTrigger, so to use a different icon, compose AccordionPrimitive.Header and AccordionPrimitive.Trigger from radix-ui yourself, as the plus icon variants do. Colors come from the CSS variables in your theme, so the accordion follows your palette and dark mode automatically. You can generate a matching palette with the free Theme Generator.

For example, this highlights the open item and rounds each section:

<AccordionItem
  value="billing"
  className="rounded-lg border px-4 data-[state=open]:bg-muted"
>
  ...
</AccordionItem>

Accordion Accessibility and Keyboard Support

The accordion follows the WAI-ARIA accordion pattern. Each trigger is a button inside a heading, has aria-expanded and aria-controls, and each panel is a region labelled by its trigger. Keep the trigger text short and descriptive, because it is what screen reader users hear when they move through the list.

Accordion Best Practices

• Keep titles short and scannable; the title should tell users whether they need to open the item.
• Use type="single" for FAQs and type="multiple" when users compare sections side by side.
• Do not hide critical information such as prices or errors inside a closed item.
• Open the most important item by default when there is an obvious first choice.
• Avoid nesting accordions more than one level deep; it makes the structure hard to follow.
• For one standalone show and hide area, use a Collapsible instead.

Components Related to Accordion

Shadcn Accordion FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.