nessra uinessra ui

Accordion

Previous: StylingNext: Alert

A vertically stacked set of interactive headings.

Docs API Reference
Loading...
import {
  Accordion,
  AccordionContent,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/accordion.json

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>

Examples

Multiple

Use type="multiple" to allow multiple items to be open at once.

Loading...
import {
  Accordion,
  AccordionContent,

API Reference

Accordion

PropTypeDefaultDescription
type"single" | "multiple"-Allow single or multiple items open (required)
valuestring | string[]-The controlled open item(s)
defaultValuestring | string[]-Default open item(s)
onValueChange(value: string | string[]) => void-Callback when value changes
collapsiblebooleanfalseAllow all items to be closed (single mode)
disabledbooleanfalseDisable the accordion

AccordionItem Props

PropTypeDefaultDescription
valuestring-The unique value of the item (required)
disabledbooleanfalseDisable the item
StylingAlert

On this page

InstallationUsageExamplesMultipleAPI ReferenceAccordionAccordionItem Props