Collapsible
Shows and hides one section of content with a trigger, animating its height.
npx prodular-ui add collapsibleShow more
The first rows stay visible. The rest expand under them.
Environment variables
- DATABASE_URLpostgres://halden-prod...
- STRIPE_SECRET_KEYsk_live_...4Xq2
"use client"
import * as React from "react"import { ChevronsUpDownIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@/components/ui/collapsible"
const variables = [ ["DATABASE_URL", "postgres://halden-prod..."], ["STRIPE_SECRET_KEY", "sk_live_...4Xq2"], ["SENTRY_DSN", "https://o4507...ingest.sentry.io"], ["REDIS_URL", "redis://cache.internal:6379"], ["FEATURE_USAGE_TIERS", "true"],]
export default function CollapsibleDefault() { const [open, setOpen] = React.useState(false) return ( <Collapsible open={open} onOpenChange={setOpen} className="flex w-full max-w-sm flex-col gap-2"> <div className="flex items-center justify-between gap-4"> <h4 className="text-sm font-medium">Environment variables</h4> <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Show all variables" />}> <ChevronsUpDownIcon /> </CollapsibleTrigger> </div> <ul className="divide-y text-[13px]"> {variables.slice(0, 2).map(([k, v]) => ( <li key={k} className="flex justify-between gap-4 py-2"> <span className="font-mono">{k}</span> <span className="truncate font-mono text-muted-foreground">{v}</span> </li> ))} </ul> <CollapsibleContent> <ul className="divide-y border-t text-[13px]"> {variables.slice(2).map(([k, v]) => ( <li key={k} className="flex justify-between gap-4 py-2"> <span className="font-mono">{k}</span> <span className="truncate font-mono text-muted-foreground">{v}</span> </li> ))} </ul> </CollapsibleContent> </Collapsible> )}Disclosure
A chevron trigger that rotates when open, styled with group-data-panel-open.
- Charged
- $12,480.00 on Oct 18, 2026
- Method
- Visa ending 4242
- Receipt
- rcpt_8f3c21a9
import { ChevronRightIcon } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@/components/ui/collapsible"
export default function CollapsibleDetails() { return ( <Collapsible defaultOpen className="w-full max-w-sm text-sm"> <CollapsibleTrigger className="group/trigger flex w-full items-center gap-1.5 rounded-md py-1 font-medium outline-none focus-visible:ring-3 focus-visible:ring-ring/40"> <ChevronRightIcon className="size-4 text-muted-foreground transition-transform duration-200 ease-out group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none" /> Payment details </CollapsibleTrigger> <CollapsibleContent> <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 pt-2 pl-5.5 text-[13px]"> <dt className="text-muted-foreground">Charged</dt> <dd className="tabular-nums">$12,480.00 on Oct 18, 2026</dd> <dt className="text-muted-foreground">Method</dt> <dd>Visa ending 4242</dd> <dt className="text-muted-foreground">Receipt</dt> <dd className="font-mono">rcpt_8f3c21a9</dd> </dl> </CollapsibleContent> </Collapsible> )}Anatomy
<Collapsible> <CollapsibleTrigger>Payment details</CollapsibleTrigger> <CollapsibleContent>...</CollapsibleContent></Collapsible>Guidance
Use it when
- One optional section: advanced settings, more rows, payment details.
- Building blocks for custom disclosures, such as a step in an agent trace.
Avoid
- Several related sections. Use Accordion.
- Hiding errors or required fields.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Render the trigger as a Button with render={<Button variant="ghost" size="icon-sm" aria-label="..." />} when it is icon only.
- Rotate trigger chevrons with group-data-panel-open on the trigger, not with your own state.
- Keep the content's layout the same as the visible part so it reads as a continuation.
- Height animates automatically and respects reduced motion. Do not add your own transition.
API
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false | Uncontrolled initial state. |
| onOpenChange | (open: boolean) => void | Called when the trigger toggles. |
CollapsibleTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| render | ReactElement | Renders the trigger as another element, usually a Button. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add collapsible# or, with the registry in components.jsonnpx shadcn@latest add @prodular/collapsible