Accordion A set of collapsible panels with headings.
CLI Package Manual
caprice shadcn
npx caprice-ui add accordion npx shadcn add https://caprice-ui.com/r/accordion.json npm install @caprice-ui/react
Install the following dependencies:
npm install @base-ui-components/react
Copy and paste the following code into your project.
Update the import paths to match your project setup.
CLI & Manual Package
import * as Accordion from "@/components/ui/accordion" import * as Accordion from "@caprice-ui/react/accordion" < Accordion.Root > < Accordion.Item value = "item-1" > < Accordion.Trigger >What is Base UI?</ Accordion.Trigger > < Accordion.Panel > Base UI is a library of high-quality unstyled React components for design systems and web apps. </ Accordion.Panel > </ Accordion.Item > </ Accordion.Root > defaultValue?AccordionValue
orientation?"vertical" | "horizontal"
key?bigint | number | string | null
suppressContentEditableWarning?boolean
suppressHydrationWarning?boolean
autoCapitalize?"characters" | "words" | "sentences" | "on" | "off" | object & string | "none"
contentEditable?"plaintext-only" | "inherit" | "false" | "true" | boolean
draggable?"false" | "true" | boolean
enterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"
spellCheck?"false" | "true" | boolean
role?"treeitem" | "treegrid" | "tree" | "tooltip" | "toolbar" | "timer" | "textbox" | "term" | "tabpanel" | "tablist" | "tab" | "status" | "spinbutton" | "slider" | "separator" | "searchbox" | "scrollbar" | "rowheader" | "rowgroup" | "row" | "region" | "radiogroup" | "radio" | "progressbar" | "presentation" | "note" | "navigation" | "menuitemradio" | "menuitemcheckbox" | "menubar" | "math" | "marquee" | "log" | "listitem" | "listbox" | "list" | "heading" | "group" | "gridcell" | "grid" | "feed" | "document" | "directory" | "definition" | "contentinfo" | "complementary" | "combobox" | "columnheader" | "checkbox" | "cell" | "banner" | "application" | "alertdialog" | "alert" | object & string | "none" | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "button" | "article"
unselectable?"on" | "off"
popover?"hint" | "manual" | "auto" | ""
popoverTargetAction?"hide" | "show" | "toggle"
inputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"
aria-activedescendant?string
aria-atomic?"false" | "true" | boolean
aria-autocomplete?"both" | "inline" | "list" | "none"
aria-brailleroledescription?string
aria-busy?"false" | "true" | boolean
aria-checked?"mixed" | "false" | "true" | boolean
aria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | boolean
aria-disabled?"false" | "true" | boolean
aria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"
aria-expanded?"false" | "true" | boolean
aria-grabbed?"false" | "true" | boolean
aria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | boolean
aria-hidden?"false" | "true" | boolean
aria-invalid?"spelling" | "grammar" | "false" | "true" | boolean
aria-live?"polite" | "assertive" | "off"
aria-modal?"false" | "true" | boolean
aria-multiline?"false" | "true" | boolean
aria-multiselectable?"false" | "true" | boolean
aria-orientation?"vertical" | "horizontal"
aria-pressed?"mixed" | "false" | "true" | boolean
aria-readonly?"false" | "true" | boolean
aria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"
aria-required?"false" | "true" | boolean
aria-roledescription?string
aria-selected?"false" | "true" | boolean
aria-sort?"other" | "descending" | "ascending" | "none"
dangerouslySetInnerHTML?object
onCompositionEnd?function
onCompositionEndCapture?function
onCompositionStart?function
onCompositionStartCapture?function
onCompositionUpdate?function
onCompositionUpdateCapture?function
onBeforeInputCapture?function
onInvalidCapture?function
onKeyDownCapture?function
onKeyPressCapture?function
onCanPlayCapture?function
onCanPlayThrough?function
onCanPlayThroughCapture?function
onDurationChange?function
onDurationChangeCapture?function
onEmptiedCapture?function
onEncryptedCapture?function
onLoadedDataCapture?function
onLoadedMetadata?function
onLoadedMetadataCapture?function
onLoadStartCapture?function
onPlayingCapture?function
onProgressCapture?function
onRateChangeCapture?function
onSeekingCapture?function
onStalledCapture?function
onSuspendCapture?function
onTimeUpdateCapture?function
onVolumeChangeCapture?function
onWaitingCapture?function
onAuxClickCapture?function
onContextMenuCapture?function
onDoubleClickCapture?function
onDragEndCapture?function
onDragEnterCapture?function
onDragExitCapture?function
onDragLeaveCapture?function
onDragOverCapture?function
onDragStartCapture?function
onMouseDownCapture?function
onMouseMoveCapture?function
onMouseOutCapture?function
onMouseOverCapture?function
onMouseUpCapture?function
onTouchCancelCapture?function
onTouchEndCapture?function
onTouchMoveCapture?function
onTouchStartCapture?function
onPointerDownCapture?function
onPointerMoveCapture?function
onPointerUpCapture?function
onPointerCancelCapture?function
onPointerOverCapture?function
onPointerOutCapture?function
onGotPointerCapture?function
onGotPointerCaptureCapture?function
onLostPointerCapture?function
onLostPointerCaptureCapture?function
onScrollEndCapture?function
onAnimationStart?function
onAnimationStartCapture?function
onAnimationEndCapture?function
onAnimationIteration?function
onAnimationIterationCapture?function
onTransitionCancel?function
onTransitionCancelCapture?function
onTransitionEndCapture?function
onTransitionRunCapture?function
onTransitionStart?function
onTransitionStartCapture?function
className?function | string
render?ComponentRenderFn < HTMLProps < any > , object > | object
ref?object | function | null
key?bigint | number | string | null
suppressContentEditableWarning?boolean
suppressHydrationWarning?boolean
autoCapitalize?"characters" | "words" | "sentences" | "on" | "off" | object & string | "none"
contentEditable?"plaintext-only" | "inherit" | "false" | "true" | boolean
draggable?"false" | "true" | boolean
enterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"
spellCheck?"false" | "true" | boolean
role?"treeitem" | "treegrid" | "tree" | "tooltip" | "toolbar" | "timer" | "textbox" | "term" | "tabpanel" | "tablist" | "tab" | "status" | "spinbutton" | "slider" | "separator" | "searchbox" | "scrollbar" | "rowheader" | "rowgroup" | "row" | "region" | "radiogroup" | "radio" | "progressbar" | "presentation" | "note" | "navigation" | "menuitemradio" | "menuitemcheckbox" | "menubar" | "math" | "marquee" | "log" | "listitem" | "listbox" | "list" | "heading" | "group" | "gridcell" | "grid" | "feed" | "document" | "directory" | "definition" | "contentinfo" | "complementary" | "combobox" | "columnheader" | "checkbox" | "cell" | "banner" | "application" | "alertdialog" | "alert" | object & string | "none" | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "button" | "article"
unselectable?"on" | "off"
popover?"hint" | "manual" | "auto" | ""
popoverTargetAction?"hide" | "show" | "toggle"
inputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"
aria-activedescendant?string
aria-atomic?"false" | "true" | boolean
aria-autocomplete?"both" | "inline" | "list" | "none"
aria-brailleroledescription?string
aria-busy?"false" | "true" | boolean
aria-checked?"mixed" | "false" | "true" | boolean
aria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | boolean
aria-disabled?"false" | "true" | boolean
aria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"
aria-expanded?"false" | "true" | boolean
aria-grabbed?"false" | "true" | boolean
aria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | boolean
aria-hidden?"false" | "true" | boolean
aria-invalid?"spelling" | "grammar" | "false" | "true" | boolean
aria-live?"polite" | "assertive" | "off"
aria-modal?"false" | "true" | boolean
aria-multiline?"false" | "true" | boolean
aria-multiselectable?"false" | "true" | boolean
aria-orientation?"vertical" | "horizontal"
aria-pressed?"mixed" | "false" | "true" | boolean
aria-readonly?"false" | "true" | boolean
aria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"
aria-required?"false" | "true" | boolean
aria-roledescription?string
aria-selected?"false" | "true" | boolean
aria-sort?"other" | "descending" | "ascending" | "none"
dangerouslySetInnerHTML?object
onCompositionEnd?function
onCompositionEndCapture?function
onCompositionStart?function
onCompositionStartCapture?function
onCompositionUpdate?function
onCompositionUpdateCapture?function
onBeforeInputCapture?function
onInvalidCapture?function
onKeyDownCapture?function
onKeyPressCapture?function
onCanPlayCapture?function
onCanPlayThrough?function
onCanPlayThroughCapture?function
onDurationChange?function
onDurationChangeCapture?function
onEmptiedCapture?function
onEncryptedCapture?function
onLoadedDataCapture?function
onLoadedMetadata?function
onLoadedMetadataCapture?function
onLoadStartCapture?function
onPlayingCapture?function
onProgressCapture?function
onRateChangeCapture?function
onSeekingCapture?function
onStalledCapture?function
onSuspendCapture?function
onTimeUpdateCapture?function
onVolumeChangeCapture?function
onWaitingCapture?function
onAuxClickCapture?function
onContextMenuCapture?function
onDoubleClickCapture?function
onDragEndCapture?function
onDragEnterCapture?function
onDragExitCapture?function
onDragLeaveCapture?function
onDragOverCapture?function
onDragStartCapture?function
onMouseDownCapture?function
onMouseMoveCapture?function
onMouseOutCapture?function
onMouseOverCapture?function
onMouseUpCapture?function
onTouchCancelCapture?function
onTouchEndCapture?function
onTouchMoveCapture?function
onTouchStartCapture?function
onPointerDownCapture?function
onPointerMoveCapture?function
onPointerUpCapture?function
onPointerCancelCapture?function
onPointerOverCapture?function
onPointerOutCapture?function
onGotPointerCapture?function
onGotPointerCaptureCapture?function
onLostPointerCapture?function
onLostPointerCaptureCapture?function
onScrollEndCapture?function
onAnimationStart?function
onAnimationStartCapture?function
onAnimationEndCapture?function
onAnimationIteration?function
onAnimationIterationCapture?function
onTransitionCancel?function
onTransitionCancelCapture?function
onTransitionEndCapture?function
onTransitionRunCapture?function
onTransitionStart?function
onTransitionStartCapture?function
className?function | string
render?ComponentRenderFn < HTMLProps < any > , object > | object
ref?object | function | null
key?bigint | number | string | null
formAction?function | string
type?"reset" | "submit" | "button"
value?array | number | string
suppressContentEditableWarning?boolean
suppressHydrationWarning?boolean
autoCapitalize?"characters" | "words" | "sentences" | "on" | "none" | "off" | object & string
contentEditable?"plaintext-only" | "inherit" | "false" | "true" | boolean
draggable?"false" | "true" | boolean
enterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"
spellCheck?"false" | "true" | boolean
role?"treeitem" | "treegrid" | "tree" | "tooltip" | "toolbar" | "timer" | "textbox" | "term" | "tabpanel" | "tablist" | "tab" | "status" | "spinbutton" | "slider" | "separator" | "searchbox" | "scrollbar" | "rowheader" | "rowgroup" | "row" | "region" | "radiogroup" | "radio" | "progressbar" | "presentation" | "note" | "navigation" | "menuitemradio" | "menuitemcheckbox" | "menubar" | "math" | "marquee" | "log" | "listitem" | "listbox" | "list" | "heading" | "group" | "gridcell" | "grid" | "feed" | "document" | "directory" | "definition" | "contentinfo" | "complementary" | "combobox" | "columnheader" | "checkbox" | "cell" | "banner" | "application" | "alertdialog" | "alert" | "none" | object & string | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "article" | "button"
unselectable?"on" | "off"
popover?"hint" | "manual" | "auto" | ""
popoverTargetAction?"hide" | "show" | "toggle"
inputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"
aria-activedescendant?string
aria-atomic?"false" | "true" | boolean
aria-autocomplete?"both" | "inline" | "list" | "none"
aria-brailleroledescription?string
aria-busy?"false" | "true" | boolean
aria-checked?"mixed" | "false" | "true" | boolean
aria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | boolean
aria-disabled?"false" | "true" | boolean
aria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"
aria-expanded?"false" | "true" | boolean
aria-grabbed?"false" | "true" | boolean
aria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | boolean
aria-hidden?"false" | "true" | boolean
aria-invalid?"spelling" | "grammar" | "false" | "true" | boolean
aria-live?"polite" | "assertive" | "off"
aria-modal?"false" | "true" | boolean
aria-multiline?"false" | "true" | boolean
aria-multiselectable?"false" | "true" | boolean
aria-orientation?"vertical" | "horizontal"
aria-pressed?"mixed" | "false" | "true" | boolean
aria-readonly?"false" | "true" | boolean
aria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"
aria-required?"false" | "true" | boolean
aria-roledescription?string
aria-selected?"false" | "true" | boolean
aria-sort?"other" | "descending" | "ascending" | "none"
dangerouslySetInnerHTML?object
onCompositionEnd?function
onCompositionEndCapture?function
onCompositionStart?function
onCompositionStartCapture?function
onCompositionUpdate?function
onCompositionUpdateCapture?function
onBeforeInputCapture?function
onInvalidCapture?function
onKeyDownCapture?function
onKeyPressCapture?function
onCanPlayCapture?function
onCanPlayThrough?function
onCanPlayThroughCapture?function
onDurationChange?function
onDurationChangeCapture?function
onEmptiedCapture?function
onEncryptedCapture?function
onLoadedDataCapture?function
onLoadedMetadata?function
onLoadedMetadataCapture?function
onLoadStartCapture?function
onPlayingCapture?function
onProgressCapture?function
onRateChangeCapture?function
onSeekingCapture?function
onStalledCapture?function
onSuspendCapture?function
onTimeUpdateCapture?function
onVolumeChangeCapture?function
onWaitingCapture?function
onAuxClickCapture?function
onContextMenuCapture?function
onDoubleClickCapture?function
onDragEndCapture?function
onDragEnterCapture?function
onDragExitCapture?function
onDragLeaveCapture?function
onDragOverCapture?function
onDragStartCapture?function
onMouseDownCapture?function
onMouseMoveCapture?function
onMouseOutCapture?function
onMouseOverCapture?function
onMouseUpCapture?function
onTouchCancelCapture?function
onTouchEndCapture?function
onTouchMoveCapture?function
onTouchStartCapture?function
onPointerDownCapture?function
onPointerMoveCapture?function
onPointerUpCapture?function
onPointerCancelCapture?function
onPointerOverCapture?function
onPointerOutCapture?function
onGotPointerCapture?function
onGotPointerCaptureCapture?function
onLostPointerCapture?function
onLostPointerCaptureCapture?function
onScrollEndCapture?function
onAnimationStart?function
onAnimationStartCapture?function
onAnimationEndCapture?function
onAnimationIteration?function
onAnimationIterationCapture?function
onTransitionCancel?function
onTransitionCancelCapture?function
onTransitionEndCapture?function
onTransitionRunCapture?function
onTransitionStart?function
onTransitionStartCapture?function
className?function | string
render?ComponentRenderFn < HTMLProps < any > , object > | object
ref?object | function | null
key?bigint | number | string | null
suppressContentEditableWarning?boolean
suppressHydrationWarning?boolean
autoCapitalize?"characters" | "words" | "sentences" | "on" | "none" | "off" | object & string
contentEditable?"plaintext-only" | "inherit" | "false" | "true" | boolean
draggable?"false" | "true" | boolean
enterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"
spellCheck?"false" | "true" | boolean
role?"treeitem" | "treegrid" | "tree" | "tooltip" | "toolbar" | "timer" | "textbox" | "term" | "tabpanel" | "tablist" | "tab" | "status" | "spinbutton" | "slider" | "separator" | "searchbox" | "scrollbar" | "rowheader" | "rowgroup" | "row" | "region" | "radiogroup" | "radio" | "progressbar" | "presentation" | "note" | "navigation" | "menuitemradio" | "menuitemcheckbox" | "menubar" | "math" | "marquee" | "log" | "listitem" | "listbox" | "list" | "heading" | "group" | "gridcell" | "grid" | "feed" | "document" | "directory" | "definition" | "contentinfo" | "complementary" | "combobox" | "columnheader" | "checkbox" | "cell" | "banner" | "application" | "alertdialog" | "alert" | "none" | object & string | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "button" | "article"
unselectable?"on" | "off"
popover?"hint" | "manual" | "auto" | ""
popoverTargetAction?"hide" | "show" | "toggle"
inputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"
aria-activedescendant?string
aria-atomic?"false" | "true" | boolean
aria-autocomplete?"both" | "inline" | "list" | "none"
aria-brailleroledescription?string
aria-busy?"false" | "true" | boolean
aria-checked?"mixed" | "false" | "true" | boolean
aria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | boolean
aria-disabled?"false" | "true" | boolean
aria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"
aria-expanded?"false" | "true" | boolean
aria-grabbed?"false" | "true" | boolean
aria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | boolean
aria-hidden?"false" | "true" | boolean
aria-invalid?"spelling" | "grammar" | "false" | "true" | boolean
aria-live?"polite" | "assertive" | "off"
aria-modal?"false" | "true" | boolean
aria-multiline?"false" | "true" | boolean
aria-multiselectable?"false" | "true" | boolean
aria-orientation?"vertical" | "horizontal"
aria-pressed?"mixed" | "false" | "true" | boolean
aria-readonly?"false" | "true" | boolean
aria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"
aria-required?"false" | "true" | boolean
aria-roledescription?string
aria-selected?"false" | "true" | boolean
aria-sort?"other" | "descending" | "ascending" | "none"
dangerouslySetInnerHTML?object
onCompositionEnd?function
onCompositionEndCapture?function
onCompositionStart?function
onCompositionStartCapture?function
onCompositionUpdate?function
onCompositionUpdateCapture?function
onBeforeInputCapture?function
onInvalidCapture?function
onKeyDownCapture?function
onKeyPressCapture?function
onCanPlayCapture?function
onCanPlayThrough?function
onCanPlayThroughCapture?function
onDurationChange?function
onDurationChangeCapture?function
onEmptiedCapture?function
onEncryptedCapture?function
onLoadedDataCapture?function
onLoadedMetadata?function
onLoadedMetadataCapture?function
onLoadStartCapture?function
onPlayingCapture?function
onProgressCapture?function
onRateChangeCapture?function
onSeekingCapture?function
onStalledCapture?function
onSuspendCapture?function
onTimeUpdateCapture?function
onVolumeChangeCapture?function
onWaitingCapture?function
onAuxClickCapture?function
onContextMenuCapture?function
onDoubleClickCapture?function
onDragEndCapture?function
onDragEnterCapture?function
onDragExitCapture?function
onDragLeaveCapture?function
onDragOverCapture?function
onDragStartCapture?function
onMouseDownCapture?function
onMouseMoveCapture?function
onMouseOutCapture?function
onMouseOverCapture?function
onMouseUpCapture?function
onTouchCancelCapture?function
onTouchEndCapture?function
onTouchMoveCapture?function
onTouchStartCapture?function
onPointerDownCapture?function
onPointerMoveCapture?function
onPointerUpCapture?function
onPointerCancelCapture?function
onPointerOverCapture?function
onPointerOutCapture?function
onGotPointerCapture?function
onGotPointerCaptureCapture?function
onLostPointerCapture?function
onLostPointerCaptureCapture?function
onScrollEndCapture?function
onAnimationStart?function
onAnimationStartCapture?function
onAnimationEndCapture?function
onAnimationIteration?function
onAnimationIterationCapture?function
onTransitionCancel?function
onTransitionCancelCapture?function
onTransitionEndCapture?function
onTransitionRunCapture?function
onTransitionStart?function
onTransitionStartCapture?function
className?function | string
render?ComponentRenderFn < HTMLProps < any > , object > | object
ref?object | function | null