Components

Collapsible

Collapsible on Base UI: 44px ink trigger, opacity-only panel, no hover effect.

Two corrections were made to this report.

Install

bash

npx shadcn add @eloquent/collapsible

Usage

tsx

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

<Collapsible>
  <CollapsibleTrigger>Show sources</CollapsibleTrigger>
  <CollapsibleContent>Court filings, 2026.</CollapsibleContent>
</Collapsible>

States

Closed

Open

Court filings, 2026.

Disabled

State	Treatment
Closed / open	`aria-expanded`; a chevron child turns 180° (off under reduced motion)
Focus	2px ink outline, 2px offset
Disabled	Halftone text, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the trigger
Enter / Space	Open or close the panel; focus stays on the trigger

Vietnamese

Bài viết này đã được đính chính hai lần.

Ink adaptation

Upstream ships the parts unstyled. Here the trigger has a 44px target, Barlow 600 and the ink focus outline, with no hover effect. The panel fades with opacity only; there is no height animation, because brand motion is opacity and transform only. Built on Base UI Collapsible.