Search

Jump to any page.

Data display

Collapsible

One section that opens to its measured height; the base for nested sidebar menus and trees.

Billing · 412 conversationsPlan changes bill customers twice

Installation

pnpm dlx shadcn@latest add @paragon/collapsible
Brings in@base-ui/reactcn

Source

registry/paragon/ui/collapsible.tsx
"use client"

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

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} />
}

/** Opens to its measured height on the Paragon ease, like the accordion. */
function CollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props) {
  return (
    <CollapsiblePrimitive.Panel
      data-slot="collapsible-content"
      className={cn(
        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-(--duration-slow) ease-paragon data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none",
        className
      )}
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }