Railbase
GPTClaude

Collapsible

An interactive section that expands and collapses its content.

Updated

Default
<Collapsible class="w-full max-w-sm">
  <CollapsibleTrigger class="font-medium">@railbase starred 3 repositories ▾</CollapsibleTrigger>
  <CollapsibleContent class="mt-2 space-y-2">
    <div class="rounded-md border px-3 py-2 text-sm">@railbase/ui</div>
    <div class="rounded-md border px-3 py-2 text-sm">@railbase/core</div>
  </CollapsibleContent>
</Collapsible>

An interactive section that expands and collapses its content.

Installation

railbase ui add collapsible

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/lib/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content.</CollapsibleContent>
</Collapsible>

Anatomy

Exported parts: Collapsible · CollapsibleTrigger · CollapsibleContent · CollapsibleCtx

← PreviousCheckboxNext →Combobox