Collapsible
An interactive component which expands and collapses content.
Preview
Loading...
import { useState } from "react";
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@/components/ui/Collapsible";
import { Button } from "@/components/ui/Button";
export function CollapsibleDemo() {
return {
const [isOpen, setIsOpen] = useState(false);
const items = [
"React",
"TypeScript",
"Tailwind CSS",
"Radix UI",
"Vite",
"Vitest",
];
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="flex items-center justify-between gap-1">
<h4 className="text-sm font-semibold">Technologies ({items.length})</h4>
<CollapsibleTrigger asChild>
<Button variant="menu" size="sm">
{isOpen ? "Hide" : "Show"} All
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<ul className="pt-1 space-y-0.5 text-sm text-gray-11">
{items.map((item, index) => (
<li key={index} className="flex items-center gap-0.5">
<span className="size-0.5 rounded-full bg-accent-9" />
{item}
</li>
))}
</ul>
</CollapsibleContent>
</Collapsible>
);
};Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/collapsibleManual
Install the following dependencies:
pnpm install radix-uiCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Collapsible component into your components/ui/Collapsible.tsx file.
"use client";
/**
* @description An interactive component which expands and collapses content.
*/
import { Collapsible as CollapsibleRadix } from "radix-ui";
import { cn } from "@/utils/class-names";
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsibleRadix.Root>) {
return <CollapsibleRadix.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsibleRadix.CollapsibleTrigger>) {
return (
<CollapsibleRadix.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsibleContent({
className,
...props
}: React.ComponentProps<typeof CollapsibleRadix.CollapsibleContent>) {
return (
<CollapsibleRadix.CollapsibleContent
className={cn(
className,
"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
)}
data-slot="collapsible-content"
{...props}
/>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };