Navigation and layout
Collapsible
An accessible disclosure region with animated content and composable triggers.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/collapsible.jsonUsage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
<Collapsible>
<CollapsibleTrigger>Details</CollapsibleTrigger>
<CollapsibleContent>More information.</CollapsibleContent>
</Collapsible>API
Main exports: Collapsible, CollapsibleTrigger, CollapsibleContent
A Base UI disclosure in plain or card appearance. CollapsibleTrigger places its chevron
with chevron="end" (default) or "start", or hides it with chevron={false}.
Plain triggers use the compact 6px radius; card triggers use 8px.
Motion
The panel animates its height, so content below it moves with the disclosure rather than jumping. This is a documented exception to compositor-only motion, alongside Sidebar. The content inside fades and blurs in and out.