Collapsible Components

Dev Design Library indexes 137 collapsible components from 50 open-source UI libraries, with the most coming from ReUI, Watermelon UI, AI Elements, Origin UI and Notra. Each one links to its page with the source code, a live preview where available, the library license and the install command. Collapsible components belong to the Data display group.

Showing 120 of 137, a mix from every library. Open a library to see all of its components.

• Collapsibleshadcn/ui · ReactAn interactive component which expands/collapses a panel.
• CollapsibleChakra UI · ReactUsed to expand and collapse additional content.
• AccordionHeroUI · ReactA collapsible content panel for organizing information in a compact space
• DisclosureHeadless UI · React
• DisclosureReact Spectrum · ReactA collapsible section of content composed of a heading that expands and collapses a panel.
• Accordioncoss ui · ReactA set of collapsible panels with headings and content.
• CollapsibleOrigin UI · ReactA collapsible panel controlled by a button trigger.
• ExpandableCult UI · ReactExpandable component system with smooth animations and customizable presets
• AccordionArk UI · ReactA collapsible component for displaying content in a vertical stack.
• Accordiontransitions.dev · HTML/CSS
• Basic collapsibleReUI · ReactBasic collapsible
• Plus Minus ToggleAmicro Micro Transitions · ReactDual square toggle buttons with solid color fills and spring micro-bounce.
• Chain Of ThoughtAI Elements · ReactA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
• AccordionPark UI · ReactA disclosure component with collapsible sections for organizing content.
• CollapseLobe UI · ReactAn expandable content container that extends Ant Design Collapse with additional styling, icons, and header…
• disclosure-groupIntent UI · Reactdisclosure-group
• Agent DisclosurebeUI · ReactShared transform-only reveal for collapsible agent content.
• AccordionTailGrids · ReactFully accessible accordion component with multiple style variants
• Reasoning TraceSpectrum UI · ReactAn expandable chain-of-thought trace with a live thinking timer.
• AccordionVengeance UI · React
• AccordionFluid Functionalism · ReactCollapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode…
• AccordionToolcraft · React
• AccordionLaunch UI · React
• Collapsible 03 - API Keys ManagerShadcn Space · ReactA collapsible API keys panel with copy-to-clipboard, delete actions, and a dropdown context menu per key.
• CollapsibleShadcn Dashboard · React
• Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
• CollapsibleObsidianUI · React
• AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
• AccordionNexvyn UI · ReactA vertically stacked set of interactive headings that each reveal a section of content, with a grid-rows unfold…
• accordionBaseLayer · ReactAn accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a…
• CollapsibleShark UI · ReactCollapsible content in a vertical stack.
• Thinking ReasoningAI CSS · React
• AccordionSona UI · ReactAn accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure…
• CollapsibleWatermelon UI · React
• Expandable cardArc Library · ReactGive a dense card more room when requested.
• AccordionHextaUI · ReactStacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable…
• Agent Step TimelineLocalMode · ReactA vertical timeline of ReAct agent steps: collapsible per-step cards (color-coded tool badge, args, observation…
• CollapsibleCojeev UI · ReactShows or hides one optional section without leaving the surrounding layout.
• AccordionROI UI · ReactA collapsible content component.
• BasicFLX UI · ReactCanonical starred-repos toggle with a chevron trigger.
• Expandable CardVelora UI · ReactExpands into a centred panel with shared-layout transitions.
• CollapsibleHalaska UI · React
• CollapsibleSpaceUI · ReactHides extra content behind a simple toggle button, allowing users to expand and read details only when they need them.
• Aria AccordionReScript shadcn · ReScript
• DisclosureOUI · ReactReact aria components Disclosure with shadcn characteristics.
• Liquid AccordionLiquefy UI · ReactAccordion in liquid glass style: translucent panels that refract the background.
• CollapsibleD2Studio UI · ReactAn interactive component which expands and collapses a panel.
• AccordionEaseUI · ReactExpanding sections that grow to their natural height with no measuring, with arrow key navigation and closed panels…
• Glass AccordionOpaline · ReactCollapsible sections on one glass panel, or as separate glass cards that grow open.
• Accordionark-cn · ReactA shadcn-style accordion component built with Ark UI primitives.
• DisclosureHeroUI · ReactA disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps…
• Tailwind DisclosureReact Spectrum · React
• Collapsiblecoss ui · ReactA collapsible panel controlled by a button trigger.
• Comp 123Origin UI · React
• Expandable ScreenCult UI · ReactA full-screen expandable component with morphing animations using shared layout IDs for smooth transitions
• CollapsibleArk UI · ReactAn interactive component that can be expanded or collapsed.
• Panel Revealtransitions.dev · HTML/CSS
• Tree view with file actionsReUI · ReactTree view with file actions
• CommitAI Elements · ReactDisplay commit information with hash, message, author, and file changes.
• CollapsiblePark UI · ReactA component for showing and hiding content with smooth transitions.
• CollapsibleLobe UI · React
• show-moreIntent UI · Reactshow-more
• CollapsiblebeUI · ReactExpandable content with a smooth reveal.
• CollapsibleTailGrids · ReactA high-performance context menu component that appears when triggered by a right-click or long-press.
• CollapsibleVengeance UI · React
• Accordion (Base UI)Fluid Functionalism · ReactCollapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Base…
• Control Section TitleToolcraft · React
• Collapsible 05 - Token UsageShadcn Space · ReactA collapsible usage card with a progress bar, summary and details.
• PlanAI Elements (Svelte) · SvelteA plan card component with collapsible content and streaming-aware description shimmer.
• ChatGPT ReasoningNotra · ReactThe collapsible "Worked for Ns" trace, built on shadcn Collapsible.
• Sidebar CollapsibleNexvyn UI · ReactA sidebar that folds down to its icons, with recent pages and the account at the bottom.
• Collapsible 1Watermelon UI · React
• CollapsibleHextaUI · ReactA panel that shows and hides with height motion you can reverse mid-way, without jumping the layout.
• ReasoningLocalMode · ReactThe model's own thinking tokens (DeepSeek-R1 style) in a collapsible region: auto-expands while streaming with an…
• CollapsibleROI UI · ReactAn expandable/collapsible panel controlled by a button.
• FAQ listFLX UI · ReactStacked question rows; each answer expands with an animated chevron.
• Detachable AccordionSpaceUI · ReactAn interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded…
• Aria CollapsibleReScript shadcn · ReScript
• Reasoning DisclosureEaseUI · React
• Collapsibleark-cn · ReactA shadcn-style collapsible component built with Ark UI primitives.
• Disclosure GroupHeroUI · ReactContainer that manages multiple Disclosure items with coordinated expanded states
• Vanilla DisclosureReact Spectrum · React
• Comp 142Origin UI · React
• Intro DisclosureCult UI · ReactIntro disclosure component with expandable content and smooth animations
• Collapsible with checkbox settingsReUI · ReactCollapsible with checkbox settings
• PlanAI Elements · ReactA collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
• Base Ui CollapsibleLobe UI · React
• Tool ResultbeUI · ReactPresents the evidence produced by an active task.
• Morphing DisclosureVengeance UI · React
• Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.
• Panel SectionToolcraft · React
• Collapsible 06 - Read MoreShadcn Space · ReactReview card that shows the first paragraph with a fade and expands the full text with a Read more / Show less toggle.
• ReasoningAI Elements (Svelte) · SvelteA collapsible reasoning block that tracks streaming duration and renders a markdown response.
• Claude Code Tool CallNotra · ReactTool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary.
• Collapsible 2Watermelon UI · React
• Differential Privacy ControlsLocalMode · ReactA collapsible DP settings panel (enable toggle, epsilon slider with derived High/Balanced/Low label, privacy-budget…
• File treeFLX UI · ReactNested folders built from collapsible rows, with folder icons that swap on open.
• Base AccordionReScript shadcn · ReScript
• Comp 156Origin UI · React
• Wizard ExpandableCult UI · ReactExpandable multi-step wizard with optional forward validation, scrollable step rail, and Motion height transitions
• Collapsible animated cardReUI · ReactCollapsible animated card
• ReasoningAI Elements · ReactA collapsible component that displays AI reasoning content, automatically opening during streaming and closing when…
• Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI…
• Collapsible 08 - Advanced OptionsShadcn Space · ReactWebhook form that hides a signing secret, retry count, and batching switch inside an animated Advanced options section.
• SourcesAI Elements (Svelte) · SvelteA collapsible sources list for rendering cited links and source groups.
• Codex ExecNotra · ReactA Ran cell with shell syntax colors and output folded behind + N lines.
• Collapsible 3Watermelon UI · React
• Read moreFLX UI · ReactTruncated paragraph reveals the rest; trigger label swaps to Show less.
• Base CollapsibleReScript shadcn · ReScript
• Comp 352Origin UI · React
• Collapsible card with bottom triggerReUI · ReactCollapsible card with bottom trigger
• SourcesAI Elements · ReactA component that allows a user to view the sources or citations used to generate a response.
• Collapsible 09 - Expandable CodeShadcn Space · ReactCode snippet that shows the first lines with line numbers and a fade, and expands to the full file with a Show more…
• TaskAI Elements (Svelte) · SvelteA collapsible task panel for tracking task state and nested task items.
• Codex ExploredNotra · ReactGrouped Read, Search and List calls with a + Show details fold.
• Collapsible 4Watermelon UI · React
• Sidebar nav groupFLX UI · ReactCollapsible navigation sections with sub-items and a rotating chevron.
• Comp 353Origin UI · React
• Collapsible form fieldsReUI · ReactCollapsible form fields
• Stack TraceAI Elements · ReactDisplays formatted JavaScript/Node.js error stack traces with syntax highlighting and collapsible frames.

Libraries with collapsible components

• ReUI
• Watermelon UI
• AI Elements
• Origin UI
• Notra

Related categories

• React Collapsible Components
• Tailwind CSS Collapsible Components
• Animated Collapsible Components
• shadcn/ui Collapsible Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components
• Card Stack Components