For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
Home

Accordion

PreviousNext

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

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

export const AccordionDemo = () => (
    <Accordion type="single" collapsible className="w-full max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. It's animated by default with a smooth expand and collapse.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );

Single

Only one item can be open at a time. Add collapsible to allow closing the active item.

Multiple

Multiple items can be open simultaneously using type="multiple".

Disabled

Disable individual items with the disabled prop on AccordionItem.

Props

Accordion

PropTypeDefaultDescription
type"single" | "multiple"—Whether one or multiple items can be open
collapsiblebooleanfalseAllow closing the active item (type="single" only)
defaultValuestring | string[]—Initially open item(s)
valuestring | string[]—Controlled open item(s)
onValueChange(value) => void—Callback when open items change

AccordionItem

PropTypeDefaultDescription
valuestring—Unique identifier for this item
disabledbooleanfalsePrevents the item from being opened
classNamestring—Additional CSS classes

AccordionTrigger

PropTypeDefaultDescription
classNamestring—Additional CSS classes
soundFeedbackType—Audio feedback on interaction
hapticboolean—Haptic feedback on interaction

AccordionContent

PropTypeDefaultDescription
classNamestring—Applied to the inner content wrapper

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
// Single — only one open at a time
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Question</AccordionTrigger>
    <AccordionContent>Answer</AccordionContent>
  </AccordionItem>
</Accordion>
 
// Multiple — several open simultaneously
<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>First</AccordionTrigger>
    <AccordionContent>Content</AccordionContent>
  </AccordionItem>
</Accordion>

Specs

# Mint — Accordion Specs
 
## Component
- name: accordion
- file: registry/mint/accordion.tsx
- installs to: components/ui/accordion.tsx
- dependencies: radix-ui
 
## What is it
A vertically stacked set of collapsible sections. Use it for FAQs, settings
panels, or any content where progressive disclosure reduces cognitive load.
Prefer Accordion over Tabs when items are independent and users may want to
compare content across multiple open sections.
 
## Visual identity
Minimal and editorial. Items are separated by a single border-b line, now a
soft mint green at 60% opacity — no background fill, no shadow. The chevron
rotates 180° on open, signalling state through motion rather than colour. Low
visual weight by design.
 
## Design tokens
--border: oklch(0.88 0.04 155 / 60%)     — item divider lines
--foreground: oklch(0.145 0 0)           — trigger label text
--muted-foreground: oklch(0.52 0.06 155) — chevron icon colour
--ring: oklch(0.5 0.14 155)              — focus ring on trigger
--radius: 1.25rem                        — trigger border-radius on focus
 
## Dark theme
--border: oklch(0.32 0.05 155 / 40%)
--foreground: oklch(0.985 0 0)
--muted-foreground: oklch(0.6 0.06 155)
 
## shadcn config (components.json)
- style: new-york
- rsc: true
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
  - components → @/components
  - ui → @/components/ui
  - utils → @/lib/utils
  - lib → @/lib
  - hooks → @/hooks
 
## Variants
- type="single"   → one item open at a time. Add collapsible to allow full close.
- type="multiple" → any number of items open simultaneously.
 
## States
- default:  trigger text in --foreground, chevron in --muted-foreground
- hover:    trigger text underlines (hover:underline)
- focus:    3px ring in --ring, rounded-md
- open:     chevron rotates 180°, content animates down (animate-accordion-down)
- closed:   content animates up (animate-accordion-up)
- disabled: opacity-50, pointer-events-none on the item
 
## Animations
- animate-accordion-down: content expands from height 0 to auto
- animate-accordion-up: content collapses from auto to height 0
- Chevron: transition-transform duration-200
 
## Conventions
- Always provide a unique `value` prop on each AccordionItem
- Use type="single" + collapsible for FAQ patterns
- Use type="multiple" when content comparison between items is expected
- Do not nest Accordions — use indented AccordionItems instead
- AccordionContent inner div uses pb-4 pt-0 — do not remove the padding
- Icons inside triggers: place before the label, size-4, text-muted-foreground

Installation

GIN Design Plugin
$ npx shadcn add https://gin-design.vercel.app/accordion