Overview
Get Started
import { IconChevronDown } from "@tabler/icons-react";
import { buttonVariants } from "@zbmui/ui/components/button";
import { cn } from "@/lib/cn";
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export function CollapsibleDemo() {
return (
<Collapsible>
<CollapsibleTrigger
className={cn(
buttonVariants({ variant: "secondary", size: "sm" }),
"data-panel-open:[&_svg]:rotate-90"
)}
>
Show recovery keys
<IconChevronDown className="size-4 transition-transform" />
</CollapsibleTrigger>
<CollapsiblePanel>
<ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
<li className="rounded-sm bg-muted px-2 py-1 font-mono">847362951023</li>
<li className="rounded-sm bg-muted px-2 py-1 font-mono">293847561829</li>
<li className="rounded-sm bg-muted px-2 py-1 font-mono">618293847562</li>
</ul>
</CollapsiblePanel>
</Collapsible>
);
}Installation
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
import { cn } from "@/lib/cn";
function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
className,
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
return (
<CollapsiblePrimitive.Trigger
className={cn("cursor-pointer", className)}
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsiblePanel({
className,
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Panel>) {
return (
<CollapsiblePrimitive.Panel
className={cn(
"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",
className
)}
data-slot="collapsible-panel"
{...props}
/>
);
}
export {
Collapsible,
CollapsibleTrigger,
CollapsiblePanel,
CollapsiblePanel as CollapsibleContent,
};Usage
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/ui/collapsible";<Collapsible>
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
<CollapsiblePanel>
Yes. Free to use for personal and commercial projects. No attribution required.
</CollapsiblePanel>
</Collapsible>