Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Loading component...

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"export default function AccordionDemo() {  return (    <div className="w-full p-6">      <Accordion        type="single"        collapsible        className="w-full max-w-3xl mx-auto"        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>  )}

Installation

npx shadcn@latest add accordion

Usage

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

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other components' aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

API Reference

The root component that wraps all accordion items.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	-	Determines whether one or multiple items can be opened at the same time.
`value`	`string \| string[]`	-	The controlled value of the item(s) to expand.
`defaultValue`	`string \| string[]`	-	The value of the item(s) to expand when initially rendered (uncontrolled).
`collapsible`	`boolean`	`false`	When `type` is `"single"`, allows closing content when clicking the trigger of an open item.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the accordion.
`dir`	`"ltr" \| "rtl"`	`"ltr"`	The reading direction of the accordion.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	The orientation of the accordion.
`asChild`	`boolean`	`false`	Merge props and behavior onto a child element.
`onValueChange`	`(value: string \| string[]) => void`	-	Event handler called when the expanded state changes.

AccordionItem

A single collapsible item within the accordion.

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the item.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the item.
`asChild`	`boolean`	`false`	Merge props and behavior onto a child element.

AccordionTrigger

The button that toggles the collapsed state of an item.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props and behavior onto a child element.

AccordionContent

The collapsible content area.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props and behavior onto a child element.
`forceMount`	`boolean`	-	Used to force mount when more control is needed.

Accessibility

The accordion component follows the WAI-ARIA Accordion Pattern, including:

Keyboard Interactions

Key	Description
`Space`	When focus is on an accordion trigger, activates the trigger.
`Enter`	When focus is on an accordion trigger, activates the trigger.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`Arrow Down`	When focus is on a trigger, moves focus to the next trigger.
`Arrow Up`	When focus is on a trigger, moves focus to the previous trigger.
`Home`	When focus is on a trigger, moves focus to the first trigger.
`End`	When focus is on a trigger, moves focus to the last trigger.

ARIA Attributes

The component automatically handles the following ARIA attributes:

role="region" on the content area
aria-controls linking triggers to their content
aria-expanded indicating the expanded state
aria-disabled when items are disabled

Customization

Styling

The accordion component uses CSS variables for theming and can be customized using Tailwind classes:

<Accordion className="w-full">
  <AccordionItem className="border-b">
    <AccordionTrigger className="text-left">
      Custom styled trigger
    </AccordionTrigger>
    <AccordionContent className="text-muted-foreground">
      Custom styled content
    </AccordionContent>
  </AccordionItem>
</Accordion>

Animation

The expand/collapse animation can be customized through CSS:

[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

Examples

Single Mode (Non-collapsible)

Loading component...

Multiple Mode

Loading component...

Controlled State

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">      <div className="w-full max-w-3xl mx-auto 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 }

Custom Styling

Loading component...

import { ChevronRight } from "lucide-react"import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"export default function AccordionCustom() {  return (    <div className="w-full p-6">      <Accordion        type="single"        collapsible        className="w-full max-w-3xl mx-auto"        defaultValue="item-1"      >        <AccordionItem value="item-1" className="border rounded-lg px-4 mb-4">          <AccordionTrigger className="hover:no-underline hover:text-primary [&[data-state=open]>svg]:rotate-90">            <div className="flex items-center gap-2">              <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />              <span className="text-left">Custom styled trigger with icon</span>            </div>          </AccordionTrigger>          <AccordionContent className="pt-2">            This accordion has custom styling applied. The trigger uses a            different icon (ChevronRight), custom hover effects, and the            entire item has a border and rounded corners.          </AccordionContent>        </AccordionItem>                <AccordionItem value="item-2" className="border rounded-lg px-4 mb-4 bg-muted/50">          <AccordionTrigger className="hover:no-underline hover:text-primary [&[data-state=open]>svg]:rotate-90">            <div className="flex items-center gap-2">              <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />              <span className="text-left">With background color</span>            </div>          </AccordionTrigger>          <AccordionContent className="pt-2">            You can customize the appearance of accordion items using Tailwind            classes. This item has a subtle background color applied.          </AccordionContent>        </AccordionItem>                <AccordionItem value="item-3" className="border-l-4 border-l-primary border rounded-lg px-4">          <AccordionTrigger className="hover:no-underline hover:text-primary [&[data-state=open]>svg]:rotate-90">            <div className="flex items-center gap-2">              <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />              <span className="text-left">With accent border</span>            </div>          </AccordionTrigger>          <AccordionContent className="pt-2">            This item features a colored left border for additional visual emphasis.            You can use these styling patterns to match your design system.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  )}

SEO Considerations

For better SEO, consider:

Semantic HTML: The accordion uses proper heading hierarchy and semantic markup.
Content Visibility: All accordion content is in the DOM (even when collapsed), making it accessible to search engines.
Structured Data: Consider adding FAQ schema markup when using accordions for FAQs:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Question text",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Answer text"
    }
  }]
}
</script>

Progressive Enhancement: The accordion content remains accessible even without JavaScript.

Accordion

Reactaccordion

Reactaccordion

Reactaccordion

Reactaccordion

Reactbutton

Reactaccordion

On this page