Collapsible

basecn/collapsible

FreeComponent

An interactive component which expands/collapses a panel.

Live preview

live · rendered by the registry

Rendered by basecn on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://basecn.dev/r/collapsible.json

Source

src/registry/components/ui/collapsible.tsxbasecn.dev/r/collapsible.json

1import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
2 
3function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
4  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
5}
6 
7function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
8  return (
9    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
10  );
11}
12 
13function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
14  return (
15    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
16  );
17}
18 
19export { Collapsible, CollapsibleTrigger, CollapsibleContent };

What it pulls in

npm packages

@base-ui/react

Files it writes

src/registry/components/ui/collapsible.tsx

More from basecn

All 56 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	basecn	Components	Free	2 deps
Alertalert	basecn	Components	Free	1 dep
Alert Dialogalert-dialog	basecn	Components	Free	1 dep
Aspect Ratioaspect-ratio	basecn	Components	Free	no deps
Autocompleteautocomplete	basecn	Components	Free	2 deps
Avataravatar	basecn	Components	Free	1 dep
Badgebadge	basecn	Components	Free	2 deps
Breadcrumbbreadcrumb	basecn	Components	Free	2 deps