Collapsible
An interactive component which expands/collapses a panel.
Made by imskyleenPowered by
Loading component...
Installation
Usage
<Collapsible>
<CollapsibleTrigger>Collapsible Trigger</CollapsibleTrigger>
<CollapsibleContent>Collapsible Content</CollapsibleContent>
</Collapsible>When to use
Use this decision tree to determine when to use the Collapsible component:
Props
Animate UI Props
CollapsibleContent
Prop
Type
Don't delete from the DOM
The choice made is the same as Radix UI, i.e. to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Collapsible content to be taken into account by Google, please replace the CollapsibleContent component with:
const CollapsibleContent = React.forwardRef<
React.ElementRef<typeof CollapsiblePrimitive.Content>,
CollapsibleContentProps
>(
(
{
className,
children,
transition = { type: 'spring', stiffness: 150, damping: 17 },
...props
},
ref,
) => {
const { isOpen } = useCollapsible();
return (
<CollapsiblePrimitive.Content asChild forceMount ref={ref} {...props}>
<motion.div
layout
initial={false}
animate={
isOpen
? { opacity: 1, height: 'auto', overflow: 'hidden' }
: { opacity: 0, height: 0, overflow: 'hidden' }
}
transition={transition}
className={className}
>
{children}
</motion.div>
</CollapsiblePrimitive.Content>
);
},
);Credits
- We use Radix UI for the collapsible component.
- We take our inspiration from Shadcn UI for the collapsible style.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.