Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Collapsible

Copy Markdown

Collapsible content in a vertical stack.

DocsAPI

PreviewCode

Total visits

22.3%10.1%6.8%1.4%

Details

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/collapsible

Anatomy#

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Usage#

import { 
  Collapsible, 
  CollapsibleTrigger, 
  CollapsibleContent 
} from "@/components/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Controlled#

Use the open and onOpenChange props to control the collapsible state programmatically.

PreviewCode

Expand

❌

States#

Disabled#

PreviewCode

Disabled Collapsible

Examples#

Nested#

Collapsibles can be nested to create hierarchical structures.

PreviewCode

Getting started

We'll help you get started

View details

Partial Collapse#

Use the collapsedHeight prop to show a portion of the content when collapsed.

PreviewCode

Read more

This is the first paragraph of content. When collapsed, only a portion of this content will be visible.

This is the second paragraph. It will be hidden when the collapsible is in its collapsed state.

This is the third paragraph. Expand the collapsible to see all the content.

This is the fourth paragraph. The collapsedHeight prop controls how much content is visible when collapsed.

Collapse (cannot be focused when collapsed)

Accessibility Notice

Interactive elements (links, buttons, inputs) within the collapsed area automatically become inaccesible to prevent keyboard navigation to hidden content.

API Reference#

Collapsible#

Root component. Controls expand/collapse state and animation.

CollapsibleTrigger#

Toggles expand/collapse on click. Use asChild for custom trigger elements.

CollapsibleContent#

Holds the content that expands and collapses. Animated by default.

CollapsibleIndicator#

Chevron or icon that rotates to indicate open/closed state.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Clipboard ](/docs/components/clipboard)[

Next page

Color Picker ](/docs/components/color-picker)

On This Page

InstallationAnatomyUsageControlledStatesDisabledExamplesNestedPartial CollapseAPI ReferenceCollapsibleCollapsibleTriggerCollapsibleContentCollapsibleIndicator