Collapsible
Install this component.
Source
"use client"
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
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}
/>
)
}
// Height-animated with the theme's `animate-expand` utility (which also
// clips overflow while it runs). Put padding and spacing on a child, not on
// the content itself, so nothing jumps at the start or end of the animation.
function CollapsibleContent({
className,
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
className={className ? `animate-expand ${className}` : "animate-expand"}
{...props}
/>
)
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }