Collapsible

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@tulipfarm/sprout/collapsible";
import { Button } from "@tulipfarm/sprout/button";

<Collapsible>
  <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
    Approval details
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>Only the listed changes are approved.</p>
  </CollapsibleContent>
</Collapsible>

Collapsible holds the open state. Pass defaultOpen to let it manage itself, or open and onOpenChange to control it. disabled blocks the trigger.

Triggers

The trigger is unstyled. Give it a Sprõut Button with render. Use outline for a main section, ghost for secondary details, xs and link inside dense status rows, andchat-row for full-width rows inside a list.

Content variants

<CollapsibleContent>…</CollapsibleContent>               // instant
<CollapsibleContent variant="sidebar">…</CollapsibleContent> // height and fade
<CollapsibleContent variant="card">…</CollapsibleContent>    // height only

Indicators

<CollapsibleTrigger>
  <Sparkle aria-hidden="true" />
  Thought for 12s
  <ChevronDown aria-hidden="true" data-slot="collapsible-indicator" />
</CollapsibleTrigger>

<ChevronRight
  aria-hidden="true"
  data-slot="collapsible-indicator"
  data-direction="right"
/>

Mark a chevron with data-slot="collapsible-indicator" and it turns 180° while open. Add data-direction="right" for a right chevron that turns 90°. It works inside the trigger, and anywhere in the header outside the content, so a chevron can sit beside a badge. To swap the icon or label instead, read the state you control.

{ "filter": "due<2026-10-18;status!=paid" }

Cards

Put the trigger in the heading and stretch its hit area over the header with a pseudo-element. Control open to close the card when the review settles.

Sidebar

Render a SidebarMenuAction as the trigger and use the sidebar content variant. Close the list while the sidebar shows only icons.

const { isMobile, state } = useSidebar();
const visible = open && (isMobile || state === "expanded");

<Collapsible open={visible} onOpenChange={setOpen}>
  <SidebarMenuButton …>Chats</SidebarMenuButton>
  <CollapsibleTrigger
    aria-label={`${visible ? "Collapse" : "Expand"} Chats`}
    render={<SidebarMenuAction />}
  >
    <ChevronRight data-slot="collapsible-indicator" data-direction="right" />
  </CollapsibleTrigger>
  <CollapsibleContent variant="sidebar">
    <SidebarMenuSub aria-label="Recent chats">…</SidebarMenuSub>
  </CollapsibleContent>
</Collapsible>

States

Content can sit before the trigger so a list grows from its button. keepMounted keeps closed content in the page, so form state and scroll position survive. Pass open with no trigger to show a fixed list.

API

The three parts wrap Base UI Collapsible. Every Base UI prop works, including render, keepMounted, hiddenUntilFound, and className as a string or a state function.

Parts get data-slot values of collapsible, collapsible-trigger, and collapsible-content. Pass your own data-slot to rename a root. The root has data-open or data-closed, the trigger has data-panel-open, and the content has data-variant plus Base UI's starting and ending style attributes. collapsibleContentVariantNames lists the variants.

Accessibility

The trigger is a button with aria-expanded and aria-controls. Enter and Space toggle it. Give icon-only triggers an aria-label that names the action, and link a disabled trigger to its reason with aria-describedby. Put the trigger inside a heading when it names a section.

Chevrons turn over 120ms and animated content grows over 180ms. Both stop when reduced motion is requested.

Theme tokens

Collapsible uses --sprout-focus, --sprout-radius-control, --sprout-motion-fast, --sprout-motion-normal, and --sprout-motion-ease. Everything else comes from the trigger and content you render, so it follows light, dark, and the TulipFarm theme.