Collapsible

Toggle content

<Collapsible>
  <CollapsibleTrigger>Toggle content</CollapsibleTrigger>
  <CollapsibleContent>
    <p class="p-4 bg-muted rounded-md mt-2">This content can be collapsed.</p>
  </CollapsibleContent>
</Collapsible>

Installation

npx bearnie add collapsible

Usage

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/bearnie/collapsible"

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    Content goes here.
  </CollapsibleContent>
</Collapsible>

Examples

Default open

Toggle (starts open)

<Collapsible defaultOpen>
  <CollapsibleTrigger>Toggle (starts open)</CollapsibleTrigger>
  <CollapsibleContent>
    <p class="p-4 bg-muted rounded-md mt-2">This content is visible by default.</p>
  </CollapsibleContent>
</Collapsible>

With button trigger

@Mike_Andreuzza starred 3 repositories

@bearnie/primitives

<Collapsible class="w-[350px] space-y-2">
  <div class="flex items-center justify-between">
    <h4 class="text-sm font-semibold">@Mike_Andreuzza starred 3 repositories</h4>
    <CollapsibleTrigger>
      <Button variant="ghost" size="sm" iconOnly>
        <HugeIcon icon={ArrowUpDownIcon} class="size-4" />
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-3 font-mono text-sm">
    @bearnie/primitives
  </div>
  <CollapsibleContent class="space-y-2">
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @bearnie/colors
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @stitches/astro
    </div>
  </CollapsibleContent>
</Collapsible>

Anatomy

Collapsible - The root container that manages state
CollapsibleTrigger - The clickable element that toggles content
CollapsibleContent - The collapsible content panel

Props

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether content is visible initially
class	string	-	Additional CSS classes

CollapsibleTrigger

Prop	Type	Default	Description
class	string	-	Additional CSS classes

CollapsibleContent

Prop	Type	Default	Description
class	string	-	Additional CSS classes