Skip to content
Appearance
Accent and overlay
Color mode

Accordion

Sections expanded from labeled triggers.

Upstream documentation

Examples

Buttons, menus, and other interface components.

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Accordion
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/accordion.json'

Usage

A complete example using the installed component and hook paths.

Accordion usage
"use client";import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";function AccordionPreview() {  return (    <div className="w-full max-w-72">      <Accordion defaultValue={["details"]}>        <AccordionItem value="details">          <AccordionTrigger>What is included?</AccordionTrigger>          <AccordionContent>Buttons, menus, and other interface components.</AccordionContent>        </AccordionItem>        <AccordionItem value="usage">          <AccordionTrigger>Where can I use them?</AccordionTrigger>          <AccordionContent>In your own interface.</AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}export default function Demo() {  return <AccordionPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Accordion

Accordion props
AccordionPrimitive.Root.Props

AccordionItem

AccordionItem props
AccordionPrimitive.Item.Props

AccordionTrigger

AccordionTrigger props
AccordionPrimitive.Trigger.Props & { sound?: boolean }
sound
true

AccordionContent

AccordionContent props
AccordionPrimitive.Panel.Props

Source

Registry JSON