Collapsible
Understand the design system and contribute to it
Component preview
The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.
Release notes
View the changes shipped this week.
• Improved stability for large workspaces.
• Fixed invite links expiring too early.
Prop reference
Auto-generated from the component source
Collapsible
All props are forwarded to the underlying primitive.
React.ComponentProps<typeof CollapsiblePrimitive.Root>
CollapsibleContent
All props are forwarded to the underlying primitive.
React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>
CollapsibleTrigger
All props are forwarded to the underlying primitive.
React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>
"use client";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsibleContent({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };