Collapsible

An interactive component which expands and collapses a panel.

Order #4189

StatusShipped

<Collapsible
  open={isOpen}
  onOpenChange={setIsOpen}
  className="flex w-full max-w-[350px] flex-col gap-2"
>
  <div className="flex items-center justify-between gap-4 px-4">
    <h4 className="text-sm font-semibold">Order #4189</h4>
    <CollapsibleTrigger
      render={<Button variant="ghost" size="icon" className="size-8" />}
    >
      <ChevronsUpDownIcon />
      <span className="sr-only">Toggle details</span>
    </CollapsibleTrigger>
  </div>
  <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
    <span className="text-muted-foreground">Status</span>
    <span className="font-medium">Shipped</span>
  </div>
  <CollapsibleContent className="flex flex-col gap-2">
    ...
  </CollapsibleContent>
</Collapsible>

Installation

pnpm dlx cubix@latest add collapsible --base aria

Usage

Import

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

Example

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Composition

Use the following composition to build a Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Controlled State

Use the open and onOpenChange props to control the state.

import * as React from "react"

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

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  )
}

Examples

Basic

<Collapsible className="rounded-md data-open:bg-muted">
  <CollapsibleTrigger
    render={<Button variant="ghost" className="w-full" />}
  >
    Product details
    <ChevronDownIcon className="ml-auto group-data-panel-open/button:rotate-180" />
  </CollapsibleTrigger>
  <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm">
    This panel can be expanded or collapsed to reveal additional content.
  </CollapsibleContent>
</Collapsible>

Settings Panel

Use a trigger button to reveal additional settings.

Radius

Set the corner radius of the element.

<Collapsible
  open={isOpen}
  onOpenChange={setIsOpen}
  className="flex items-start gap-2"
>
  <div className="grid w-full grid-cols-2 gap-2">
    <Input placeholder="0" defaultValue={0} />
    <Input placeholder="0" defaultValue={0} />
    <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
      <Input placeholder="0" defaultValue={0} />
      <Input placeholder="0" defaultValue={0} />
    </CollapsibleContent>
  </div>
  <CollapsibleTrigger render={<Button variant="outline" size="icon" />}>
    {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}
  </CollapsibleTrigger>
</Collapsible>

File Tree

Use nested collapsibles to build a file tree.

<Collapsible>
  <CollapsibleTrigger
    render={
      <Button
        variant="ghost"
        size="sm"
        className="group w-full justify-start"
      />
    }
  >
    <ChevronRightIcon className="transition-transform group-data-panel-open/button:rotate-90" />
    <FolderIcon />
    components
  </CollapsibleTrigger>
  <CollapsibleContent className="mt-1 ml-5">
    ...
  </CollapsibleContent>
</Collapsible>

API Reference

Note: See the Base UI or Radix UI Collapsible docs for the full primitive API.

Collapsible

The root that manages open state and provides context to trigger and content.

Prop	Type	Default	Description
open	boolean	-	Controlled open state of the panel.
defaultOpen	boolean	-	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CollapsibleTrigger

The control that toggles the panel. Compose it onto a Button when you need a styled trigger.

Prop	Type	Default	Description
render	React.ReactElement	-	Compose the trigger onto a child element such as Button (Base UI).
asChild	boolean	-	Compose the trigger onto a child element such as Button (Radix UI).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CollapsibleContent

The panel that expands and collapses.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Content revealed when the panel is open.