Content

Collapsible

Content on demand.

Collapsible

Content on demand.

Content

Advanced settings

Additional options stay close without taking over the screen.

View component

Install

npx shadcn@latest add http://localhost:3000/r/collapsible.json

Usage

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export function Example() {
  const [collapsed, setCollapsed] = useState(false)
  return (
    <Collapsible
      open={!collapsed}
      onOpenChange={(open) => setCollapsed(!open)}
      className="w-full max-w-xs space-y-2"
    >
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium">Advanced settings</span>
        <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
          {collapsed ? "Show" : "Hide"}
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="rounded-lg border p-3 text-xs text-muted-foreground">
        Additional options stay close without taking over the screen.
      </CollapsibleContent>
    </Collapsible>
  )
}

API

CollapsibleCollapsibleTriggerCollapsibleContent

function Collapsible(props: CollapsiblePrimitive.Root.Props)

function CollapsibleTrigger(props: CollapsiblePrimitive.Trigger.Props)

function CollapsibleContent(props: CollapsiblePrimitive.Panel.Props)

Source code +

"use client"

import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"

function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
  return (
    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
  )
}

function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
  return (
    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Registry JSON ↗