Accordion

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

Preview
Code

React is a JavaScript library for building user interfaces.

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

export const Basic = () => {
  return (
    <Accordion defaultValue={['React']} className="max-w-[400px] w-full">
      {['React', 'Solid', 'Vue'].map((item) => (
        <AccordionItem key={item} value={item} className="w-full">
          <AccordionTrigger className="w-full bg-transparent">
            What is {item}?
          </AccordionTrigger>
          <AccordionContent>
            {item} is a JavaScript library for building user interfaces.
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
};

Installation

CLI
Manual

Run the following command:

npx borristw-ui@latest add accordion

yarn borristw-ui@latest add accordion

pnpm borristw-ui@latest add accordion

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--height)' },
        },
        'accordion-up': {
          from: { height: 'var(--height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
};

Install the following dependencies:

npm i @ark-ui/react

yarn add @ark-ui/react

pnpm add @ark-ui/react

Copy and paste the following code into your project.

'use client';

import { Accordion as AccordionPrimitive } from '@ark-ui/react/accordion';
import { ChevronDownIcon } from 'lucide-react';
import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ElementRef,
} from 'react';

import { cn } from '@/lib/utils';

const Accordion = AccordionPrimitive.Root;

const AccordionItem = forwardRef<
  ElementRef<typeof AccordionPrimitive.Item>,
  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn('border-b', className)}
    {...props}
  />
));
AccordionItem.displayName = 'AccordionItem';

const AccordionTrigger = forwardRef<
  ElementRef<typeof AccordionPrimitive.ItemTrigger>,
  ComponentPropsWithoutRef<typeof AccordionPrimitive.ItemTrigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.ItemTrigger
    ref={ref}
    className={cn(
      'flex bg-transparent cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all hover:underline',
      className,
    )}
    {...props}
  >
    {children}
    <AccordionPrimitive.ItemIndicator className="data-[state=open]:rotate-180">
      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
    </AccordionPrimitive.ItemIndicator>
  </AccordionPrimitive.ItemTrigger>
));
AccordionTrigger.displayName = AccordionPrimitive.ItemTrigger.displayName;

const AccordionContent = forwardRef<
  ElementRef<typeof AccordionPrimitive.ItemContent>,
  ComponentPropsWithoutRef<typeof AccordionPrimitive.ItemContent>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.ItemContent
    ref={ref}
    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn('pb-4 pt-0', className)}>{children}</div>
  </AccordionPrimitive.ItemContent>
));
AccordionContent.displayName = AccordionPrimitive.ItemContent.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

Update the import paths to match your project setup.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--height)' },
        },
        'accordion-up': {
          from: { height: 'var(--height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
};

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>