Can you add animation to the Collapsible component like you to do the accordion component?

[684efs3]

Can you add animation to the Collapsible component like you to do the accordion component? Thank you!

[imopbuilder]

@684efs3

Update the files with the changes to have a animated collapsible like accordion

Api reference: https://www.radix-ui.com/primitives/docs/components/collapsible#animating-content-size

tailwind.config.ts

keyframes: {
	'collapsible-down': {
		from: { height: '0' },
		to: { height: 'var(--radix-collapsible-content-height)' },
	},
	'collapsible-up': {
		from: { height: 'var(--radix-collapsible-content-height)' },
		to: { height: '0' },
	},
},
animation: {
	'collapsible-down': 'collapsible-down 0.2s ease-out',
	'collapsible-up': 'collapsible-up 0.2s ease-out',
},

collapsible.tsx - Inside the dir components/ui/collapsible.tsx

'use client';

import { cn } from '@/lib/utils';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
import * as React from 'react';

const Collapsible = CollapsiblePrimitive.Root;

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

const CollapsibleContent = React.forwardRef<
	React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
	React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, ...props }, ref) => (
	<CollapsiblePrimitive.CollapsibleContent
		ref={ref}
		className={cn('overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up', className)}
		{...props}
	/>
));

export { Collapsible, CollapsibleContent, CollapsibleTrigger };

[imopbuilder]

@shadcn

You can close this issue 🌟

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.