Accordion

Preview

Is it accessible?

Is it styled?

Is it animated?

Installation

npx skeci-ui add accordion

Usage

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

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

Variants

Multiple Selection

Can I open multiple?

Is it useful?

Props

Accordion

Prop	Type	Default	Description
type	'single' | 'multiple'	'single'	Determines whether one or multiple items can be opened at the same time.
defaultValue	string | string[]	—	The value of the item(s) to expand by default.

AccordionItem

Prop	Type	Default	Description
value	string	(required)	A unique value for the item.