Shadcn Accordion

A vertically stacked set of interactive headings that each reveal a section of content, perfect for organizing content into collapsible sections.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

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

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible defaultValue="react">
      <AccordionItem value="react">
        <AccordionTrigger>Creative Tim UI React</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="html">
        <AccordionTrigger>Creative Tim UI HTML</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="vue">
        <AccordionTrigger>Creative Tim UI Vue</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add accordion

Usage

import AccordionDemo from "@/components/accordion-demo"

<AccordionDemo />

Examples

Accordion All Open

An accordion configured with type='multiple' allowing multiple sections to be expanded simultaneously, useful for comparing content across sections.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

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

export function AccordionAllOpen() {
  return (
    <Accordion type="multiple" defaultValue={["react", "html", "vue"]}>
      <AccordionItem value="react">
        <AccordionTrigger>Creative Tim UI React</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="html">
        <AccordionTrigger>Creative Tim UI HTML</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="vue">
        <AccordionTrigger>Creative Tim UI Vue</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Accordion Custom Icon

An accordion with custom plus/minus icons that toggle between open and closed states, providing a more intuitive visual indicator for expandable content.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { Minus, Plus } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
} from "@/components/ui/accordion"

const CustomAccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=closed]>.minus-icon]:hidden [&[data-state=open]>.plus-icon]:hidden",
        className
      )}
      {...props}
    >
      {children}
      <Plus className="plus-icon h-4 w-4 shrink-0" />
      <Minus className="minus-icon h-4 w-4 shrink-0" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
CustomAccordionTrigger.displayName = "CustomAccordionTrigger"

export function AccordionCustomIcon() {
  return (
    <Accordion type="single" collapsible defaultValue="react">
      <AccordionItem value="react">
        <CustomAccordionTrigger>Creative Tim UI React</CustomAccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="html">
        <CustomAccordionTrigger>Creative Tim UI HTML</CustomAccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="vue">
        <CustomAccordionTrigger>Creative Tim UI Vue</CustomAccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Accordion Custom Styles

A fully styled accordion with custom borders, padding, and rounded corners, demonstrating how to customize the appearance to match your design system.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

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

export function AccordionCustomStyles() {
  return (
    <Accordion type="single" collapsible defaultValue="react">
      <AccordionItem
        value="react"
        className="border-border mb-2 rounded-lg border p-3 last:mb-0"
      >
        <AccordionTrigger className="p-0 hover:no-underline">
          Creative Tim UI React
        </AccordionTrigger>
        <AccordionContent className="pt-3 pb-0">
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        value="html"
        className="border-border mb-2 rounded-lg border p-3 last:mb-0"
      >
        <AccordionTrigger className="p-0 hover:no-underline">
          Creative Tim UI HTML
        </AccordionTrigger>
        <AccordionContent className="pt-3 pb-0">
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        value="vue"
        className="border-border rounded-lg border p-3"
      >
        <AccordionTrigger className="p-0 hover:no-underline">
          Creative Tim UI Vue
        </AccordionTrigger>
        <AccordionContent className="pt-3 pb-0">
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Accordion Disabled

An accordion with a disabled item that cannot be opened or interacted with, useful for temporarily restricting access to certain content sections.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

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

export function AccordionDisabled() {
  return (
    <Accordion type="single" collapsible defaultValue="html">
      <AccordionItem value="react" disabled>
        <AccordionTrigger>Creative Tim UI React</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="html">
        <AccordionTrigger>Creative Tim UI HTML</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="vue">
        <AccordionTrigger>Creative Tim UI Vue</AccordionTrigger>
        <AccordionContent>
          Creative Tim UI is an open-source library crafted in Tailwind CSS. Get
          Creative Tim UI and take advantage of its free components and features
          that will help you set up your web project quickly.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Accordion Controlled

A controlled accordion with external buttons to programmatically open specific sections, demonstrating how to manage accordion state from outside the component.

Creative Tim UI is an open-source library crafted in Tailwind CSS. Get Creative Tim UI and take advantage of its free components and features that will help you set up your web project quickly.

"use client"

import * as React from "react"

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

export function AccordionControlled() {
  const [value, setValue] = React.useState("html")

  return (
    <div>
      <div className="mb-4 flex gap-2">
        <Button
          className="flex-1"
          variant={value === "react" ? "default" : "outline"}
          onClick={() => setValue("react")}
        >
          React Version
        </Button>
        <Button
          className="flex-1"
          variant={value === "html" ? "default" : "outline"}
          onClick={() => setValue("html")}
        >
          HTML Version
        </Button>
        <Button
          className="flex-1"
          variant={value === "vue" ? "default" : "outline"}
          onClick={() => setValue("vue")}
        >
          Vue Version
        </Button>
      </div>
      <Accordion
        type="single"
        collapsible
        value={value}
        onValueChange={setValue}
      >
        <AccordionItem value="react">
          <AccordionTrigger>Creative Tim UI React</AccordionTrigger>
          <AccordionContent>
            Creative Tim UI is an open-source library crafted in Tailwind CSS.
            Get Creative Tim UI and take advantage of its free components and
            features that will help you set up your web project quickly.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="html">
          <AccordionTrigger>Creative Tim UI HTML</AccordionTrigger>
          <AccordionContent>
            Creative Tim UI is an open-source library crafted in Tailwind CSS.
            Get Creative Tim UI and take advantage of its free components and
            features that will help you set up your web project quickly.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="vue">
          <AccordionTrigger>Creative Tim UI Vue</AccordionTrigger>
          <AccordionContent>
            Creative Tim UI is an open-source library crafted in Tailwind CSS.
            Get Creative Tim UI and take advantage of its free components and
            features that will help you set up your web project quickly.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

Props

The accordion component is built using Radix UI's Accordion primitive and accepts the following props:

Accordion (Root Component)

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	-	Determines whether one or multiple items can be opened at the same time
`collapsible`	`boolean`	`false`	When type is "single", allows closing content when clicking the open item
`defaultValue`	`string \| string[]`	-	The value(s) of the item(s) to expand by default (uncontrolled)
`value`	`string \| string[]`	-	The controlled value(s) of the item(s) to expand
`onValueChange`	`(value: string \| string[]) => void`	-	Event handler called when the expanded state changes
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the accordion

AccordionItem

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the item (required)
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the item
`className`	`string`	-	Additional CSS classes to apply to the item

AccordionTrigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the trigger button
`children`	`ReactNode`	-	The content to display in the trigger

AccordionContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the content container
`children`	`ReactNode`	-	The content to display when the accordion item is expanded

Best Practices

Use accordions to organize related content into collapsible sections
Keep accordion headers concise and descriptive
Consider using type="single" for mutually exclusive content
Use type="multiple" when users need to compare content across sections
Provide clear visual indicators for expanded/collapsed states
Ensure keyboard navigation works properly for accessibility
Avoid nesting accordions more than two levels deep

The accordion component provides a clean way to manage content density while maintaining accessibility and user experience. It's ideal for FAQs, settings panels, navigation menus, and any interface where progressive disclosure is beneficial.

Components Alert

On This Page

Installation Usage Examples Accordion All Open Accordion Custom Icon Accordion Custom Styles Accordion Disabled Accordion Controlled Props Accordion (Root Component)AccordionItem AccordionTrigger AccordionContent Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.