saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Accordion

Accordion

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

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple

Loading...
Accordion with multiple items open at once.

Disabled

Loading...
Accordion with a disabled item.

Bordered

Loading...
Accordion wrapped in a border.

Card

Loading...
Accordion inside a Card.

Split

Loading...
Card-style split accordion.

API Reference

Accordion

PropTypeDefaultDescription
type"single" | "multiple""single"Whether one or multiple items can be opened.
collapsiblebooleanfalseWhen type is single, allows closing content.
defaultValuestring | string[]—The default expanded item(s).
valuestring | string[]—The controlled expanded item(s).
onValueChange(value: string | string[]) => void—Event handler for state changes.

AccordionItem

PropTypeDefaultDescription
value*string—A unique value for the item.
disabledbooleanfalseDisables interaction with this item.

AccordionTrigger

PropTypeDefaultDescription
childrenReact.ReactNode—The trigger button content.
asChildbooleanfalseRender as child element.

AccordionContent

PropTypeDefaultDescription
childrenReact.ReactNode—The content to reveal.
forceMountboolean—Force mount for animation control.

Accessibility

Built on Radix UI, which adheres to the WAI-ARIA Pattern.

Keyboard Interactions

KeyDescription
SpaceToggles the collapsed state.
EnterToggles the collapsed state.
ArrowDownMoves focus to the next trigger.
ArrowUpMoves focus to the previous trigger.
HomeMoves focus to the first trigger.
EndMoves focus to the last trigger.

On This Page

  • Installation
  • Usage
  • Examples
  • Multiple
  • Disabled
  • Bordered
  • Card
  • Split
  • API Reference
  • Accordion
  • AccordionItem
  • AccordionTrigger
  • AccordionContent
  • Accessibility
  • Keyboard Interactions

Subscription & Billing
Common questions about your account, plans, payments and cancellations.