Components
Base Components
Collapsible
An interactive component that expands and collapses a panel.
Example
Installation
Install the following dependencies:
npm install radix-uiCreate a collapsible.tsx file and paste the following code into it.
"use client";import * as React from "react";import { Collapsible as CollapsiblePrimitive } from "radix-ui";import { cn } from "@/lib/utils";const Collapsible = CollapsiblePrimitive.Root;const CollapsibleTrigger = CollapsiblePrimitive.Trigger;const CollapsibleContent = CollapsiblePrimitive.Content;export { Collapsible, CollapsibleTrigger, CollapsibleContent };Check the import paths to ensure they 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>Controlled state
Use theopen and onOpenChange props to control the state.
import * as React from "react";
export function Example() {
const [open, setOpen] = React.useState(false);
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsibleContent>Content</CollapsibleContent>
</Collapsible>
);
}Examples
Basic
With card
Order #4189