Accordion

A vertically stacked list of interactive headings that can be toggled to show and hide content.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add accordion

Variants & Examples

Default Accordion

A basic accordion with a single collapsible item.

Code for Default Accordion

1import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
2
3export function DefaultAccordion() {
4  return (
5    <Accordion type="single" collapsible className="w-full">
6      <AccordionItem value="item-1">
7        <AccordionTrigger>Is it accessible?</AccordionTrigger>
8        <AccordionContent>
9          Yes. It adheres to the WAI-ARIA design pattern.
10        </AccordionContent>
11      </AccordionItem>
12      <AccordionItem value="item-2">
13        <AccordionTrigger>Is it styled?</AccordionTrigger>
14        <AccordionContent>
15          Yes. It comes with default styles that you can override.
16        </AccordionContent>
17      </AccordionItem>
18    </Accordion>
19  )
20}

Multiple Accordion

An accordion that allows multiple items to be open simultaneously.

Code for Multiple Accordion

1import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
2
3export function MultipleAccordion() {
4  return (
5    <Accordion type="multiple" className="w-full">
6      <AccordionItem value="item-1">
7        <AccordionTrigger>What is React?</AccordionTrigger>
8        <AccordionContent>
9          React is a JavaScript library for building user interfaces.
10        </AccordionContent>
11      </AccordionItem>
12      <AccordionItem value="item-2">
13        <AccordionTrigger>What is Next.js?</AccordionTrigger>
14        <AccordionContent>
15          Next.js is a React framework for building full-stack web applications.
16        </AccordionContent>
17      </AccordionItem>
18    </Accordion>
19  )
20}

Props

These are the available props for the Accordion component:

Prop	Type	Description	Default
type	"single" \| "multiple"	Determines if one or multiple items can be open at a time.	"single"
collapsible	boolean	When type is 'single', allows the currently open item to be closed.	false
value	string	The controlled value of the open accordion item(s).	-
defaultValue	string	The initial value of the open accordion item(s).	-
onValueChange	(value: string) => void	Event handler called when the value changes.	-