Back to Components
New

Collapsible

A collapsible component that allows users to toggle the visibility of content.

disclosure
toggle
content

Preview

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"

export const CollapsiblePreview = () => {
  return (
    <Collapsible>
      <CollapsibleTrigger asChild>
        <Button variant="outline">Show more</Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p>Hello</p>
      </CollapsibleContent>
    </Collapsible>
  )
}

API Reference

PropTypeDefaultDescription
openboolean-Whether the collapsible is open.
onOpenChangefunction-Function called when the open state of the collapsible changes.
View Full Documentation