CollapsibleDemo() — ui Function Reference

Architecture documentation for the CollapsibleDemo() function in collapsible-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CollapsibleDemo() — ui Function Reference

Dependency Diagram

graph TD
  c1ba2775_dc5e_f510_314c_c87a9f0b42f2["CollapsibleDemo()"]
  94f31f81_79a7_2a51_638c_3b40a68e3c82["collapsible-demo.tsx"]
  c1ba2775_dc5e_f510_314c_c87a9f0b42f2 -->|defined in| 94f31f81_79a7_2a51_638c_3b40a68e3c82
  style c1ba2775_dc5e_f510_314c_c87a9f0b42f2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/collapsible-demo.tsx lines 12–46

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

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="flex 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" />}
        >
          <ChevronsUpDown />
          <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">
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Shipping address</p>
          <p className="text-muted-foreground">100 Market St, San Francisco</p>
        </div>
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Items</p>
          <p className="text-muted-foreground">2x Studio Headphones</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}