Collapsible

An interactive component which expands/collapses a panel with a smooth motion.

ScrollX UI | Build faster

70+ cool components

Installation

npx shadcn@latest add https://scrollxui.dev/registry/collapsible.json

Usage

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

<Collapsible>
  <CollapsibleTrigger>What is ScrollX UI?</CollapsibleTrigger>
  <CollapsibleContent>
    ScrollX UI is a collection of modern, animated, and customizable UI
    components built for React and Next.js.
  </CollapsibleContent>
</Collapsible>

API Reference

Collapsible

An interactive component which expands/collapses a panel with a smooth motion.

Props

Property	Type	Default	Description
`asChild`	boolean	`false`	Render a custom component instead of the default element.
`open`	boolean	`-`	Controls the open state of the collapsible.
`defaultOpen`	boolean	`false`	Sets the initial open state.
`onOpenChange`	(open: boolean) => void	`-`	Fires when the open state changes.
`children`	React.ReactNode	`required`	Content inside the collapsible.
`data-slot`	string	`-`	Internal attribute for styling/testing.