Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

Install the Alert component using the nocta-ui CLI:

npx nocta-ui add accordion

Then import the components you need:

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from './accordion';

A simple accordion with collapsible content sections.

You can install components using our CLI: npx nocta-ui add accordion

Use the card variant for a more elevated appearance with individual cards for each item.

The accordion comes in three sizes: sm, md (default), and lg.

Prop	Type	Default	Description
`variant`	`'default' \| 'card'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the accordion
`className`	`string`	`''`	Additional CSS classes

Prop	Type	Default	Description
`value`	`string`	`undefined`	Optional id seed for ARIA linking
`id`	`string`	`undefined`	Optional explicit id seed
`disabled`	`boolean`	`false`	Disables the item
`defaultOpen`	`boolean`	`false`	Whether the item should be open by default
`className`	`string`	`''`	Additional CSS classes

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes