Components / Primitives

Collapsible

Content that eases open and closed from its measured height.

3 pending invitations
sara@example.com
pnpm exec shadcn add @intelligo/collapsible

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

Nothing else from the registry.

npm packages it adds

@base-ui/react

used by these pages

No block installs it yet; it is there for your own screens.

more in primitives

Alert dialog, Button, Dialog, Dropdown menu, Input, Popover, Progress, Select, Sheet, Sidebar, Tabs, Textarea, Tooltip, Checkbox, Radio group, Switch, Command

Source

What shadcn add writes to components/ui/collapsible.tsx. It is yours from then on.

"use client";

/*
 * The collapsible: the panel's height eases open and closed from Base UI's
 * measured height instead of snapping.
 */

import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";

import { cn } from "@showcase/lib/utils";

function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}

function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
  return (
    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
  );
}

function CollapsibleContent({
  className,
  ...props
}: CollapsiblePrimitive.Panel.Props) {
  return (
    <CollapsiblePrimitive.Panel
      data-slot="collapsible-content"
      className={cn(
        "h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-slow ease-emphasized data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-normal data-ending-style:ease-exit data-starting-style:h-0 data-starting-style:opacity-0",
        className
      )}
      {...props}
    />
  );
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent };

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started