snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/collapsible-demo.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/styles/base-nova/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/styles/base-nova/ui/collapsible"
+
+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>
+  )
+}