Collapsible

Installation#

1. Install the dependencies

   npm install radix-ui

2. Copy the source into your project

   components/ui/collapsible.tsx

   "use client"import { Collapsible as CollapsiblePrimitive } from "radix-ui"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 }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"

Examples#