Collapsible

An interactive component which expands/collapses a panel.

Order #4189

StatusShipped

1
import { useState } from "react";
2

3
import { Button } from "@/components/ui/pxl/button";
4
import {
5
  Collapsible,
6
  CollapsibleContent,
7
  CollapsibleTrigger,
8
} from "@/components/ui/pxl/collapsible";
9

10
export default function CollapsibleDemo() {
11
  const [isOpen, setIsOpen] = useState(false);
12

13
  return (
14
    <Collapsible
15
      open={isOpen}
16
      onOpenChange={setIsOpen}
17
      className="flex w-87.5 flex-col gap-2"
18
    >
19
      <div className="flex items-center justify-between gap-4 px-4">
20
        <h4 className="text-sm font-semibold">Order #4189</h4>
21
        <CollapsibleTrigger
22
          render={
23
            <Button variant="ghost" size="icon" className="size-8">
24
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M13 20h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8-2v2h-2v-2h2Zm-8-4H7V8h2v2Zm8 0h-2V8h2v2Zm-6-2H9V6h2v2Zm4 0h-2V6h2v2Zm-2-2h-2V4h2v2Z"/></svg>
25
              <span className="sr-only">Toggle details</span>
26
            </Button>
27
          }
28
        />
29
      </div>
30
      <div className="flex items-center justify-between pixel-border px-4 py-2 text-sm">
31
        <span className="text-muted-foreground">Status</span>
32
        <span className="font-medium">Shipped</span>
33
      </div>
34
      <CollapsibleContent className="flex flex-col gap-2">
35
        <div className="pixel-border px-4 py-2 text-sm">
36
          <p className="font-medium">Shipping address</p>
37
          <p className="text-muted-foreground">100 Market St, San Francisco</p>
38
        </div>
39
        <div className="pixel-border px-4 py-2 text-sm">
40
          <p className="font-medium">Items</p>
41
          <p className="text-muted-foreground">2x Studio Headphones</p>
42
        </div>
43
      </CollapsibleContent>
44
    </Collapsible>
45
  );
46
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/collapsible

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
2
import { cva, type VariantProps } from "class-variance-authority";
3

4
import { cn } from "@/lib/utils";
5

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

10
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
11
  return (
12
    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
13
  );
14
}
15

16
const collapsibleContentVariants = cva("", {
17
  variants: {
18
    transition: {
19
      none: "",
20
      easeOut:
21
        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0",
22
    },
23
  },
24
  defaultVariants: {
25
    transition: "none",
26
  },
27
});
28

29
function CollapsibleContent({
30
  className,
31
  transition = "none",
32
  ...props
33
}: CollapsiblePrimitive.Panel.Props &
34
  VariantProps<typeof collapsibleContentVariants>) {
35
  return (
36
    <CollapsiblePrimitive.Panel
37
      data-slot="collapsible-content"
38
      className={cn(collapsibleContentVariants({ transition }), className)}
39
      {...props}
40
    />
41
  );
42
}
43

44
export { Collapsible, CollapsibleContent, CollapsibleTrigger };

Update the import paths to match your project setup.

Usage

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

<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 { useState } from "react"

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

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

Transition

Use transition="easeOut" to enable animated transition.

1
import { Button } from "@/components/ui/pxl/button";
2
import {
3
  Collapsible,
4
  CollapsibleContent,
5
  CollapsibleTrigger,
6
} from "@/components/ui/pxl/collapsible";
7

8
export default function CollapsibleTransition() {
9
  return (
10
    <Collapsible className="mx-auto w-full max-w-sm h-fit pixel-rounded data-open:bg-muted">
11
      <CollapsibleTrigger
12
        render={
13
          <Button variant="ghost" className="w-full">
14
            Product details
15
            <svg
16
              className="ml-auto group-data-panel-open/button:rotate-180"
17
              xmlns="http://www.w3.org/2000/svg"
18
              fill="currentColor"
19
              viewBox="0 0 24 24"
20
            >
21
              <path d="M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z" />
22
            </svg>
23
          </Button>
24
        }
25
      />
26
      <CollapsibleContent
27
        transition="easeOut"
28
        className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm"
29
      >
30
        <div>
31
          This panel can be expanded or collapsed to reveal additional content.
32
        </div>
33
        <Button size="xs">Learn More</Button>
34
      </CollapsibleContent>
35
    </Collapsible>
36
  );
37
}

API Reference

See the Base UI documentation for more information.