Shadcn Accordion

React accordion component for collapsible content sections. Built with TypeScript and Tailwind CSS for Next.js with keyboard navigation support.

Accordion animations jerky?

Join our Discord community for help from other developers.

Ever built a FAQ page where users had to scroll through walls of text to find one answer? Yeah, that's painful for everyone involved. This shadcn/ui accordion component solves that problem by letting users focus on what they actually need in your Next.js app—no scrolling through irrelevant content, no overwhelming walls of text.

FAQ accordion

Standard accordion for frequently asked questions:

Loading component...

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"export default function AccordionDemo() {  return (    <div className="w-full p-6 flex justify-center">      <div className="w-full max-w-lg">        <Accordion          type="single"          collapsible          className="w-full"          defaultValue="item-1"        >      <AccordionItem value="item-1">        <AccordionTrigger>Product Information</AccordionTrigger>        <AccordionContent className="flex flex-col gap-4 text-balance">          <p>            Our flagship product combines cutting-edge technology with sleek            design. Built with premium materials, it offers unparalleled            performance and reliability.          </p>          <p>            Key features include advanced processing capabilities, and an            intuitive user interface designed for both beginners and experts.          </p>        </AccordionContent>      </AccordionItem>      <AccordionItem value="item-2">        <AccordionTrigger>Shipping Details</AccordionTrigger>        <AccordionContent className="flex flex-col gap-4 text-balance">          <p>            We offer worldwide shipping through trusted courier partners.            Standard delivery takes 3-5 business days, while express shipping            ensures delivery within 1-2 business days.          </p>          <p>            All orders are carefully packaged and fully insured. Track your            shipment in real-time through our dedicated tracking portal.          </p>        </AccordionContent>      </AccordionItem>      <AccordionItem value="item-3">        <AccordionTrigger>Return Policy</AccordionTrigger>        <AccordionContent className="flex flex-col gap-4 text-balance">          <p>            We stand behind our products with a comprehensive 30-day return            policy. If you&apos;re not completely satisfied, simply return the            item in its original condition.          </p>          <p>            Our hassle-free return process includes free return shipping and            full refunds processed within 48 hours of receiving the returned            item.          </p>        </AccordionContent>      </AccordionItem>        </Accordion>      </div>    </div>  )}

The animations feel smooth, keyboard navigation works like you'd expect, and screen readers handle everything properly. Built with TypeScript for type safety and styled with Tailwind CSS classes.

npx shadcn@latest add accordion

Why accordions actually work

Here's the thing—accordions aren't just about saving space. They're about respecting your users' attention. Instead of forcing someone to process everything at once, you let them choose what's relevant.

Think of it like a good table of contents—users scan headers, find what they need, and ignore the rest. That's smart information architecture that shadcn/ui components make effortless.

You can fit tons of content without making pages feel overwhelming. This becomes super important on mobile where every pixel matters.

Built on Radix UI primitives, this shadcn/ui component follows the WAI-ARIA accordion design pattern. Full keyboard navigation, screen reader support, and proper focus management work automatically. No extra JavaScript configuration needed.

Real patterns you'll actually use

Settings panel with multiple sections

Organize privacy controls, notifications, and account settings. Shows multiple expansion mode in action with Switch components:

Loading component...

"use client"import * as React from "react"import * as AccordionPrimitive from "@radix-ui/react-accordion"import { ChevronDownIcon } from "lucide-react"import { cn } from "@/lib/utils"function Accordion({  ...props}: React.ComponentProps<typeof AccordionPrimitive.Root>) {  return <AccordionPrimitive.Root data-slot="accordion" {...props} />}function AccordionItem({  className,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Item>) {  return (    <AccordionPrimitive.Item      data-slot="accordion-item"      className={cn("border-b last:border-b-0", className)}      {...props}    />  )}function AccordionTrigger({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {  return (    <AccordionPrimitive.Header className="flex">      <AccordionPrimitive.Trigger        data-slot="accordion-trigger"        className={cn(          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",          className        )}        {...props}      >        {children}        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />      </AccordionPrimitive.Trigger>    </AccordionPrimitive.Header>  )}function AccordionContent({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Content>) {  return (    <AccordionPrimitive.Content      data-slot="accordion-content"      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"      {...props}    >      <div className={cn("pt-0 pb-4", className)}>{children}</div>    </AccordionPrimitive.Content>  )}export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

Controlled state

Programmatically control which sections are open—useful for guided tours or linking to specific sections:

Loading component...

"use client"import { useState } from "react"import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"import { Button } from "@/components/ui/button"export default function AccordionControlled() {  const [value, setValue] = useState<string>("item-2")  return (    <div className="w-full p-6 flex justify-center">      <div className="w-full max-w-lg space-y-4">        <div className="flex gap-2 flex-wrap">          <Button            variant="outline"            size="sm"            onClick={() => setValue("item-1")}          >            Open First          </Button>          <Button            variant="outline"            size="sm"            onClick={() => setValue("item-2")}          >            Open Second          </Button>          <Button            variant="outline"            size="sm"            onClick={() => setValue("item-3")}          >            Open Third          </Button>          <Button            variant="outline"            size="sm"            onClick={() => setValue("")}          >            Close All          </Button>        </div>                <Accordion          type="single"          collapsible          value={value}          onValueChange={setValue}          className="w-full"        >          <AccordionItem value="item-1">            <AccordionTrigger>Controlled Section 1</AccordionTrigger>            <AccordionContent>              This accordion is controlled programmatically. Use the buttons above              to open specific sections, or click the triggers to change the value.              The current value is: {value || "none"}            </AccordionContent>          </AccordionItem>          <AccordionItem value="item-2">            <AccordionTrigger>Controlled Section 2</AccordionTrigger>            <AccordionContent>              Controlled accordions are useful when you need to synchronize the              accordion state with other parts of your application, or when you              want to open specific sections based on user actions elsewhere.            </AccordionContent>          </AccordionItem>          <AccordionItem value="item-3">            <AccordionTrigger>Controlled Section 3</AccordionTrigger>            <AccordionContent>              You can also use controlled state to implement features like              "expand all" or "collapse all", or to save and restore the              accordion state from localStorage or a database.            </AccordionContent>          </AccordionItem>        </Accordion>      </div>    </div>  )}

"use client"import * as React from "react"import * as AccordionPrimitive from "@radix-ui/react-accordion"import { ChevronDownIcon } from "lucide-react"import { cn } from "@/lib/utils"function Accordion({  ...props}: React.ComponentProps<typeof AccordionPrimitive.Root>) {  return <AccordionPrimitive.Root data-slot="accordion" {...props} />}function AccordionItem({  className,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Item>) {  return (    <AccordionPrimitive.Item      data-slot="accordion-item"      className={cn("border-b last:border-b-0", className)}      {...props}    />  )}function AccordionTrigger({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {  return (    <AccordionPrimitive.Header className="flex">      <AccordionPrimitive.Trigger        data-slot="accordion-trigger"        className={cn(          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",          className        )}        {...props}      >        {children}        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />      </AccordionPrimitive.Trigger>    </AccordionPrimitive.Header>  )}function AccordionContent({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Content>) {  return (    <AccordionPrimitive.Content      data-slot="accordion-content"      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"      {...props}    >      <div className={cn("pt-0 pb-4", className)}>{children}</div>    </AccordionPrimitive.Content>  )}export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

Multi-level nested accordion

Create hierarchical content with nested Collapsible sections and icons at all levels:

Loading component...

"use client"import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/ui/collapsible"import { ChevronRight, Settings, Users, Database } from "lucide-react"import { useState } from "react"export default function AccordionNested() {  const [openSections, setOpenSections] = useState<{[key: string]: boolean}>({})  const toggleSection = (section: string) => {    setOpenSections(prev => ({ ...prev, [section]: !prev[section] }))  }  return (    <div className="w-full p-6 flex justify-center">      <div className="w-full max-w-lg">        <Accordion          type="single"          collapsible          className="w-full"          defaultValue="item-1"        >          <AccordionItem value="item-1">            <AccordionTrigger className="text-left">              <div className="flex items-center gap-3">                <Settings className="h-4 w-4 text-gray-600" />                <span>Account Settings</span>              </div>            </AccordionTrigger>            <AccordionContent className="pl-7">              <div className="space-y-2">                <Collapsible                   open={openSections.profile}                   onOpenChange={() => toggleSection('profile')}                >                  <CollapsibleTrigger className="flex items-center gap-2 py-2 text-sm hover:text-foreground">                    <ChevronRight className={`h-3 w-3 transition-transform ${openSections.profile ? 'rotate-90' : ''}`} />                    Profile Information                  </CollapsibleTrigger>                  <CollapsibleContent className="pl-5 text-sm text-muted-foreground">                    Update your name, email, and profile picture. Changes are saved automatically.                  </CollapsibleContent>                </Collapsible>                <Collapsible                   open={openSections.password}                   onOpenChange={() => toggleSection('password')}                >                  <CollapsibleTrigger className="flex items-center gap-2 py-2 text-sm hover:text-foreground">                    <ChevronRight className={`h-3 w-3 transition-transform ${openSections.password ? 'rotate-90' : ''}`} />                    Password & Security                  </CollapsibleTrigger>                  <CollapsibleContent className="pl-5 text-sm text-muted-foreground">                    Change your password, enable two-factor authentication, and manage login sessions.                  </CollapsibleContent>                </Collapsible>              </div>            </AccordionContent>          </AccordionItem>                    <AccordionItem value="item-2">            <AccordionTrigger className="text-left">              <div className="flex items-center gap-3">                <Users className="h-4 w-4 text-gray-600" />                <span>Team Management</span>              </div>            </AccordionTrigger>            <AccordionContent className="pl-7">              <div className="space-y-2">                <Collapsible                   open={openSections.members}                   onOpenChange={() => toggleSection('members')}                >                  <CollapsibleTrigger className="flex items-center gap-2 py-2 text-sm hover:text-foreground">                    <ChevronRight className={`h-3 w-3 transition-transform ${openSections.members ? 'rotate-90' : ''}`} />                    Team Members                  </CollapsibleTrigger>                  <CollapsibleContent className="pl-5 text-sm text-muted-foreground">                    Invite new members, manage roles and permissions, and remove inactive users.                  </CollapsibleContent>                </Collapsible>                <Collapsible                   open={openSections.roles}                   onOpenChange={() => toggleSection('roles')}                >                  <CollapsibleTrigger className="flex items-center gap-2 py-2 text-sm hover:text-foreground">                    <ChevronRight className={`h-3 w-3 transition-transform ${openSections.roles ? 'rotate-90' : ''}`} />                    Roles & Permissions                  </CollapsibleTrigger>                  <CollapsibleContent className="pl-5 text-sm text-muted-foreground">                    Create custom roles, assign permissions, and control access to different features.                  </CollapsibleContent>                </Collapsible>              </div>            </AccordionContent>          </AccordionItem>        </Accordion>      </div>    </div>  )}

"use client"import * as React from "react"import * as AccordionPrimitive from "@radix-ui/react-accordion"import { ChevronDownIcon } from "lucide-react"import { cn } from "@/lib/utils"function Accordion({  ...props}: React.ComponentProps<typeof AccordionPrimitive.Root>) {  return <AccordionPrimitive.Root data-slot="accordion" {...props} />}function AccordionItem({  className,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Item>) {  return (    <AccordionPrimitive.Item      data-slot="accordion-item"      className={cn("border-b last:border-b-0", className)}      {...props}    />  )}function AccordionTrigger({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {  return (    <AccordionPrimitive.Header className="flex">      <AccordionPrimitive.Trigger        data-slot="accordion-trigger"        className={cn(          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",          className        )}        {...props}      >        {children}        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />      </AccordionPrimitive.Trigger>    </AccordionPrimitive.Header>  )}function AccordionContent({  className,  children,  ...props}: React.ComponentProps<typeof AccordionPrimitive.Content>) {  return (    <AccordionPrimitive.Content      data-slot="accordion-content"      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"      {...props}    >      <div className={cn("pt-0 pb-4", className)}>{children}</div>    </AccordionPrimitive.Content>  )}export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

Each pattern serves different use cases in your React applications. Whether you're building with Next.js or another framework, these accordion patterns handle the complex state management so you don't have to.

Features

The accordion component includes everything you need:

Full keyboard navigation - Arrow keys, Space, Enter, Home, End all work as expected
Flexible expansion modes - Single or multiple items can be open simultaneously
Controlled or uncontrolled - Use with React state or let the component manage itself
Animation ready - CSS variables for content height/width make smooth animations easy
Accessibility first - WAI-ARIA compliant with proper focus management and screen reader support
TypeScript native - Built with TypeScript, works perfectly in JavaScript projects too

API Reference

Prop	Type	Default
`type?`	`"single" \| "multiple"`	`"single"`
`collapsible?`	`boolean`	`false`
`defaultValue?`	`string \| string[]`	-
`value?`	`string \| string[]`	-
`onValueChange?`	`(value: string \| string[]) => void`	-

Keyboard interactions

Built on Radix UI, the accordion supports full keyboard navigation:

Key	Description
`Space` / `Enter`	Toggles the focused accordion item
`Tab`	Moves focus to next focusable element
`Shift + Tab`	Moves focus to previous focusable element
`ArrowDown`	Moves focus to next accordion trigger
`ArrowUp`	Moves focus to previous accordion trigger
`Home`	Moves focus to first accordion trigger
`End`	Moves focus to last accordion trigger

Production tips

Performance matters. This free shadcn/ui component is lightweight and works great in TypeScript projects. The Tailwind CSS styling keeps bundle sizes small while maintaining full customization.

Default states create better UX. For FAQs, keep everything closed—let users choose what to open. For dashboards, consider opening the most important section by default. Similar to Tabs, think about which content users need first.

Trigger labels should be scannable. "Payment & Billing" beats "Manage your payment methods and billing preferences." Users need to scan quickly.

Test keyboard navigation thoroughly. Arrow keys should move between triggers, Space/Enter should toggle items. This open source shadcn/ui component handles focus management, but custom triggers need testing.

Radix UI foundation. This component wraps @radix-ui/react-accordion, giving you unstyled primitives with perfect accessibility. The shadcn/ui styling layer adds beautiful defaults while keeping full customization possible.

Integration with other components

Accordions work great with Form components for organizing complex React interfaces. Combine with Badge components to show status or counts in trigger headers. Use Lucide React icons for visual hierarchy—the shadcn/ui design system makes these integrations smooth in JavaScript applications.

Shadcn Accordion

FAQ accordion

Why accordions actually work

Real patterns you'll actually use

Settings panel with multiple sections

Controlled state

Multi-level nested accordion

Features

API Reference

Keyboard interactions

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Accordion

Reactaccordion

Reactaccordion

Reactswitch

Reactlabel

Reactaccordion

Reactbutton

Reactaccordion

Reactcollapsible

When should I use single vs multiple mode?

Should any sections be open by default?

Any special considerations for mobile?

What about accessibility?

How do I customize the styling?

Can I add icons or badges to triggers?

How does it work with forms?

On this page