Collapsible
An interactive component which expands and collapses a panel.
Loading…
"use client";import { Button } from "@/components/ui/button";import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@/components/ui/collapsible";import { ChevronsUpDown } from "lucide-react";export default function CollapsibleDemo() { return ( <Collapsible className="flex w-[350px] max-w-full flex-col gap-2"> <div className="flex items-center justify-between gap-4 px-4"> <h4 className="text-sm font-semibold"> @peduarte starred 3 repositories </h4> <CollapsibleTrigger asChild> <Button variant="ghost" size="icon" className="size-8"> <ChevronsUpDown /> <span className="sr-only">Toggle</span> </Button> </CollapsibleTrigger> </div> <div className="rounded-md border px-4 py-2 font-mono text-sm"> @radix-ui/primitives </div> <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-2 overflow-hidden"> <div className="rounded-md border px-4 py-2 font-mono text-sm"> @radix-ui/colors </div> <div className="rounded-md border px-4 py-2 font-mono text-sm"> @stitches/react </div> </CollapsibleContent> </Collapsible> );}Installation
npx shadcn@latest add @cortexcn/collapsibleInstall the following dependencies:
npm install radix-uiCopy and paste the following code into your project.
"use client";import { Collapsible as CollapsiblePrimitive } from "radix-ui";import * as React from "react";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} /> );}function CollapsibleContent({ ...props}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) { return ( <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} /> );}export { Collapsible, CollapsibleTrigger, CollapsibleContent };Update the import paths to match your project setup.
Usage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";<Collapsible>
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
<CollapsibleContent>
Yes. Free to use for personal and commercial projects. No attribution
required.
</CollapsibleContent>
</Collapsible>API Reference
See the Radix UI documentation for more information.