Components
Collapsible
An interactive region that expands and collapses.
The Collapsible primitive wraps Radix Collapsible — a region whose content
toggles open and closed from a trigger. Compose Collapsible (Root, which owns
the open/onOpenChange state) → CollapsibleTrigger (usually asChild
around a button) → CollapsibleContent (the region that animates in and out).
Preview
@ada starred 3 repositories
@radix-ui/primitives
'use client';import { useState } from 'react';import { ChevronsUpDown } from 'lucide-react';import { Button } from '@web/components/ui/button';import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from '@web/components/ui/collapsible';export default function CollapsibleDemo() { const [open, setOpen] = useState(false); return ( <Collapsible open={open} onOpenChange={setOpen} className="flex w-full max-w-sm flex-col gap-2" > <div className="flex items-center justify-between gap-4 px-1"> <h4 className="text-sm font-semibold">@ada 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="flex flex-col gap-2"> <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> );}Import
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";Props
Each part forwards every prop of its Radix element. Collapsible (Root) takes
open / defaultOpen / onOpenChange and disabled; CollapsibleTrigger and
CollapsibleContent take their native props plus className.