Accordion

Collapsible content sections via Radix UI

Single

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tryvienna/ui'

<Accordion type="single" collapsible className="w-96">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the other components' aesthetic.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It's animated by default with smooth expand/collapse transitions.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Single

Single

<Accordion type="single" collapsible className="w-96">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the other components' aesthetic.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It's animated by default with smooth expand/collapse transitions.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

Multiple

<Accordion type="multiple" className="w-96">
  <AccordionItem value="item-1">
    <AccordionTrigger>Section One</AccordionTrigger>
    <AccordionContent>Content for section one. Multiple items can be open.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section Two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion

Also accepts all props from AccordionPrimitive.Root.

AccordionItem

Also accepts all props from AccordionPrimitive.Item.

AccordionTrigger

Also accepts all props from AccordionPrimitive.Trigger.

AccordionContent

Also accepts all props from AccordionPrimitive.Content.

Data Attributes

Component	data-slot
Accordion	"accordion"
AccordionItem	"accordion-item"
AccordionTrigger	"accordion-trigger"
AccordionContent	"accordion-content"