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

import Collapsible from "@/components/ui/collapsible/Collapsible.astro";
import CollapsibleTrigger from "@/components/ui/collapsible/CollapsibleTrigger.astro";
import CollapsibleContent from "@/components/ui/collapsible/CollapsibleContent.astro";

Usage

import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@/components/ui/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>
      <ChevronsUpDown 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