Docs
Accordion

Accordion

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

This component uses Radix UI

import {
  Accordion_Shadcn_,
  AccordionContent_Shadcn_,
  AccordionItem_Shadcn_,
  AccordionTrigger_Shadcn_,
} from 'ui'
 
export function AccordionDemo() {
  return (
    <Accordion_Shadcn_ type="single" collapsible className="w-full">
      <AccordionItem_Shadcn_ value="item-1">
        <AccordionTrigger_Shadcn_>Is it accessible?</AccordionTrigger_Shadcn_>
        <AccordionContent_Shadcn_>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent_Shadcn_>
      </AccordionItem_Shadcn_>
      <AccordionItem_Shadcn_ value="item-2">
        <AccordionTrigger_Shadcn_>Is it styled?</AccordionTrigger_Shadcn_>
        <AccordionContent_Shadcn_>
          Yes. It comes with default styles that matches the other components&apos; aesthetic.
        </AccordionContent_Shadcn_>
      </AccordionItem_Shadcn_>
      <AccordionItem_Shadcn_ value="item-3">
        <AccordionTrigger_Shadcn_>Is it animated?</AccordionTrigger_Shadcn_>
        <AccordionContent_Shadcn_>
          Yes. Its animated by default, but you can disable it if you prefer.
        </AccordionContent_Shadcn_>
      </AccordionItem_Shadcn_>
    </Accordion_Shadcn_>
  )
}

Installation

Run the following command:

npx shadcn-ui@latest add accordion

Update tailwind.config.js

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-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>
PreviousIntroduction
NextAlert