Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Collapsible
A collapsible panel controlled by a button.
import { ChevronDownIcon } from "lucide-react";
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export default function Particle() {
return (
<Collapsible>
<CollapsibleTrigger className="inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180">
Show recovery keys
<ChevronDownIcon className="size-4" />
</CollapsibleTrigger>
<CollapsiblePanel>
<ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
<li className="rounded-sm bg-muted px-2 py-1 font-mono">
4829-1735-6621
</li>
<li className="rounded-sm bg-muted px-2 py-1 font-mono">
9182-6407-5532
</li>
<li className="rounded-sm bg-muted px-2 py-1 font-mono">
3051-7924-9018
</li>
</ul>
</CollapsiblePanel>
</Collapsible>
);
}
Installation
pnpm dlx shadcn@latest add @coss/collapsible
Usage
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible"<Collapsible>
<CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
<CollapsiblePanel>
Yes, you can access the file in the cloud.
</CollapsiblePanel>
</Collapsible>API Reference
Collapsible
Root component. Alias for Collapsible.Root from Base UI.
CollapsibleTrigger
Trigger button that toggles the collapsible panel. Styled wrapper for Collapsible.Trigger from Base UI.
CollapsiblePanel
Collapsible content panel. Styled wrapper for Collapsible.Panel from Base UI with animated height transitions. Also exported as CollapsibleContent.