Skip to content
Cuelark UI
LayoutAnimated

Accordion

Stacked disclosure sections with numbered, dashed and separated styles.

An accordion lets readers scan a list of headings and open only what they need. Cuelark's accordion adds CSS-counter numbering, a plus that turns into a close mark, and three surface styles, while each trigger stays inside a real heading for a clean document outline.

Preview

Run the shadcn CLI with the component URL. The source is copied into your project, so you can change anything.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/accordion.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/accordion.

Builds on: motion

Usage

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

<Accordion type="single" collapsible numbered>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA accordion pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Separated and dashed

Card-like items, and dashed rules between items.

Orders leave our warehouse within two business days.

Motion

How it moves

As a panel opens, its children rise in one after another (GSAP stagger). Items open on first render skip it.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Accordion

Extends Radix Accordion.Root (type, value, defaultValue, collapsible, …).

PropTypeDefaultDescription
variant"lined" | "dashed" | "separated""lined"Divider style between items.
numberedbooleanfalsePrefix triggers with 01, 02, … via CSS counters.

AccordionItem

Extends Radix Accordion.Item.

PropTypeDefaultDescription
valuestring—Unique value of the item.

AccordionTrigger

Rendered inside an <h3> header.

AccordionContent

Animates height on open and close.

Accessibility

  • Triggers are buttons inside <h3> headings with aria-expanded and aria-controls.
  • Space and Enter toggle; arrow keys, Home and End move between triggers.
  • Height animations are skipped when the user prefers reduced motion.

FAQ

Also searched as: react accordion · shadcn accordion · faq accordion · collapsible sections · tailwind accordion