Accordion

Installation

Install the following dependencies:

terminal

npm install @radix-ui/react-accordion
npm install lucide-react

npm install @radix-ui/react-accordionnpm install lucide-react

Create a `accordion.tsx` file and paste the following code into it.

/components/ui/accordion.tsx usage

"use client"

import * as React from "react"
import { ChevronDownIcon, ChevronRight } from "lucide-react"
import { Accordion as AccordionPrimitive } from "radix-ui"

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-start 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-90",
          className
        )}
        {...props}
      >
        <ChevronRight className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
        {children}
      </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 }

"use client"import * as React from "react"import { ChevronDownIcon, ChevronRight } from "lucide-react"import { Accordion as AccordionPrimitive } from "radix-ui"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-start 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-90",          className        )}        {...props}      >        <ChevronRight className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />        {children}      </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 }

Check the import paths to ensure they match your project setup.

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Trigger</AccordionTrigger>
    <AccordionContent>Content</AccordionContent>
  </AccordionItem>
</Accordion>

The root component. Directly extends Radix Accordion root props. | Prop | Type | Default | Description | | ------------- | --------- | ----------- | ------------------------------------------ | ------------------------------------------- | | type | "single" | "multiple" | - | Defines whether one or multiple items open. | | collapsible | boolean | false | Allows collapsing the currently open item. |

AccordionItem

Wraps each section. Accepts Radix item props.

AccordionTrigger

The button that toggles visibility. Forwards button HTML attributes.

AccordionContent

The panel that reveals content. Animates open/close automatically.

Accordion

Example

Installation

Install the following dependencies:

Create a `accordion.tsx` file and paste the following code into it.

Check the import paths to ensure they match your project setup.

Usage

Examples

Single Expand

Multiple Expand

API Reference

Accordion

AccordionItem

AccordionTrigger

AccordionContent

On this page

Accordion

What is Blake UI?

Is it accessible?

Install the following dependencies:

Create a accordion.tsx file and paste the following code into it.

Check the import paths to ensure they match your project setup.

Is toggle animation included?

Can I collapse all?

First panel

Second panel

Third panel

On this page

Create a `accordion.tsx` file and paste the following code into it.