NOCTA UI

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/cli add accordion

Then import the components you need:

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from '@/components/ui/accordion';

Examples

Default Accordion

Multiple

Card Variant

Sizes

API Reference

Accordion

Prop

Type

AccordionItem

Prop

Type

AccordionTrigger

Prop

Type

AccordionContent

Prop

Type

Design Tokens

Reference guide for Nocta UI’s global design tokens — colors, shadows, and radii.

Card

A versatile card component system with modular architecture and dark mode support

On this page

Installation
Examples
Default Accordion
Multiple
Card Variant
Sizes
API Reference
Accordion
AccordionItem
AccordionTrigger
AccordionContent