Collapsible

An interactive section that expands and collapses to reveal additional content.

Squads include a dedicated team of designers, a project manager, and a senior creative director — all working together on your brand.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/collapsible.json

Usage

Import the flat CollapsibleSection wrapper for the common case, or drop down to the primitives for full control.

TSImport

import { CollapsibleSection } from "@/components/ui/collapsible";

TSExample

import { CollapsibleSection } from "@/components/ui/collapsible";

export function Example() {
  return (
    <CollapsibleSection
      variant="default"
      title="What's included in the squad?"
      description="Click to expand and read the details."
      defaultOpen
    >
      <p className="pt-2 text-muted-foreground">
        Squads include a dedicated team of designers, a project manager, and a
        senior creative director — all working together on your brand.
      </p>
    </CollapsibleSection>
  );
}

Composition

Anatomy of CollapsibleSection and the underlying primitives.

CollapsibleSection                 (flat one-liner — pass everything as props)
├── variant="default | outline | ghost"
├── size="sm | default | lg"
├── title={<ReactNode>}              (heading row, required)
├── description={<ReactNode>}        (muted secondary line, optional)
├── icon={<ReactNode>}                (override the chevron, optional)
├── defaultOpen / open / onOpenChange (uncontrolled or controlled)
├── disabled?: boolean
└── children                         (body content)

— or use the primitives directly —

Collapsible                          (Base UI Collapsible.Root with data-slot)
├── CollapsibleTrigger               (button that toggles the panel)
└── CollapsibleContent               (animated panel; uses --collapsible-panel-height)

Default

Bordered card surface with a chevron indicator that rotates when open.

Squads include a dedicated team of designers, a project manager, and a senior creative director — all working together on your brand.

Outline

Outlined variant for lighter surfaces.

Ghost

No border, hover-only background — slots into dense forms.

Controlled

Lift the open state into your component with open / onOpenChange.

State:closed

Nested

A CollapsibleSection inside another CollapsibleSection.

Manage profile, billing, and team settings.

Primitives

Drop down to Collapsible / CollapsibleTrigger / CollapsibleContent for full control.

@thesqd/squad-ui starred 3 repositories

@sis-thesqd/squad-ui

@sis-thesqd/squad-sdk

@sis-thesqd/dynamic-forms-squad-sdk

API Reference

Props for the flat CollapsibleSection wrapper and the underlying primitives.

CollapsibleSection

Prop	Type	Default	Description
`title`	ReactNode	—	Heading rendered in the trigger row.
`description`	ReactNode	—	Optional muted secondary line below the title.
`variant`	"default" \| "outline" \| "ghost"	"default"	Surface treatment — bordered card, outline, or ghost.
`size`	"sm" \| "default" \| "lg"	"default"	Padding scale applied to the trigger row and body.
`icon`	ReactNode	—	Indicator icon. Defaults to ChevronDown that rotates 180° when open.
`hideIcon`	boolean	false	Hide the indicator icon entirely.
`defaultOpen`	boolean	false	Initial open state when uncontrolled.
`open`	boolean	—	Controlled open state. Pair with onOpenChange.
`onOpenChange`	(open: boolean) => void	—	Fires when the user toggles the section.
`disabled`	boolean	false	Disable the trigger and grey out the section.
`children`	ReactNode	—	Body content rendered inside the animated panel.

Primitives

Prop	Type	Default	Description
`Collapsible`	Base UI Collapsible.Root	—	Root container. Accepts open / defaultOpen / onOpenChange / disabled.
`CollapsibleTrigger`	Base UI Collapsible.Trigger	—	Button that toggles the panel. Use render={<Button … />} to swap the element.
`CollapsibleContent`	Base UI Collapsible.Panel	—	Animated panel. Reads --collapsible-panel-height for height transitions.