# Collapsible card (goodtabs UI)

A card whose header toggles its body, with a turning chevron and a meta slot.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/collapsible-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/collapsible-card`

## Usage

```tsx
import { CollapsibleCard } from "@/components/ui/collapsible-card"

<CollapsibleCard title="Billing" description="Plan and invoices" meta="Pro" defaultOpen>
  <p>Pro, yearly. Next invoice 12 Nov.</p>
</CollapsibleCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | The header text. Clicking it toggles the body. |
| description | `ReactNode` |  | One line under the title. |
| meta | `ReactNode` |  | Something small on the right of the header, outside the button. |
| defaultOpen | `boolean` | `false` | Start open when uncontrolled. |
| open | `boolean` |  | Controlled open state. |
| onOpenChange | `(open: boolean) => void` |  | Called when the header is toggled. |
| children | `ReactNode` |  | The body, hidden while closed. |

## When to use

- Settings sections that most people never open
- FAQ lists where each answer opens on its own
- Long detail under a short summary, such as logs or a diff

## When not to use

- When only one section should be open at a time, use an accordion
- For content people need at once; hiding it costs a click
- As a page navigation device

## Notes for agents

- Client component on radix Collapsible: defaultOpen, open and onOpenChange work as in shadcn; pass onOpenChange only from a client component
- The header is one button with aria-expanded; meta renders beside it, not inside it, so it may hold a link or button
- The body is text-sm text-muted-foreground on a hairline; style children to override
- Each card is independent; for one open at a time, control open yourself

Docs: https://ui.goodtabs.co/components/collapsible-card