Collapsible

Installation

pnpm dlx saastro add collapsible

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add collapsible --yes

pnpm add tailwind-variants

Usage

---
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui-saastro/collapsible"
---

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    Content that can be shown or hidden.
  </CollapsibleContent>
</Collapsible>

Examples

Basic

<Collapsible>
  <CollapsibleTrigger>
    <Button variant="ghost">Click to expand</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>This content is collapsible.</p>
  </CollapsibleContent>
</Collapsible>

Default Open

Use defaultOpen to have the collapsible open by default.

<Collapsible defaultOpen>
  <CollapsibleTrigger>
    <Button variant="ghost">Click to collapse</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>This content is visible by default.</p>
  </CollapsibleContent>
</Collapsible>

With Custom Styling

<Collapsible class="w-[350px] space-y-2">
  <div class="flex items-center justify-between">
    <h4 class="text-sm font-semibold">Settings</h4>
    <CollapsibleTrigger>
      <Button variant="outline" size="sm">Toggle</Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent class="space-y-2">
    <div class="rounded-md border p-4">
      <p>Advanced settings content...</p>
    </div>
  </CollapsibleContent>
</Collapsible>

Components

Collapsible

The root container that manages the open/closed state.

CollapsibleTrigger

The button that toggles the collapsible state.

CollapsibleContent

The content that is shown or hidden.

Props

Collapsible

CollapsibleTrigger

CollapsibleContent

Data Attributes

Collapsible

CollapsibleContent

Accessibility

• Trigger uses aria-expanded to indicate state
• Trigger uses aria-controls to reference the content element
• Content visibility is controlled via the hidden attribute
• Keyboard accessible - trigger can be activated with Enter/Space

Performance