Collapsible

A thin wrapper around Base UI's Collapsible primitive. Unlike the Accordion, a collapsible is a standalone toggle -- use it when you have a single section of content to expand and collapse.

@peduarte starred 3 repositories

@radix-ui/primitives

"use client"

import * as React from "react"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"
import { ChevronsUpDownIcon } from "lucide-react"

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
        <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" />}>
          <ChevronsUpDownIcon />
          <span className="sr-only">Toggle</span>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/primitives</div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/colors</div>
        <div className="rounded-md border px-4 py-2 text-sm">@stitches/react</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Anatomy

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

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content revealed on toggle.
  </CollapsibleContent>
</Collapsible>

Examples

Basic collapsible

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="outline">Show more</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p className="pt-2 text-sm text-muted-foreground">
      This content is hidden by default and revealed when the trigger is clicked.
    </p>
  </CollapsibleContent>
</Collapsible>

Default open

Pass defaultOpen to start in the expanded state.

<Collapsible defaultOpen>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">Collapse</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p className="pt-2 text-sm">Visible by default.</p>
  </CollapsibleContent>
</Collapsible>

Controlled

function Demo() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger asChild>
        <Button variant="outline">{open ? "Hide" : "Show"} details</Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p className="pt-2 text-sm text-muted-foreground">
          Detailed information goes here.
        </p>
      </CollapsibleContent>
    </Collapsible>
  )
}

API Reference

Collapsible

The root component. Manages the open/closed state.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes.
`disabled`	`boolean`	`false`	Whether the collapsible is disabled.
`children`	`ReactNode`	—

CollapsibleTrigger

The element that toggles the collapsible. Accepts Base UI Collapsible.Trigger props.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CollapsibleContent

The panel that is shown or hidden. Accepts Base UI Collapsible.Panel props.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—