Collapsible

One section that unfolds, or a "show more" preview. Free, MIT · Data and metrics › Lists and trees

Installation

npx valyro-cli@latest add collapsible

npx shadcn@latest add https://valyro.xyz/r/collapsible.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Collapsible } from 'valyro-ui';

Prop	Type
`open`	`boolean`	Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	Initial state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	Called with the new `open` when it changes.
`disabled`	`boolean`	The trigger does nothing.
`collapsedHeight`	`number`	Height in px shown while closed, with a faded bottom edge ("show more"); 0 hides the content.
`hidden`	`'until-found' \| 'unmount' \| 'keep'`	What closed content does: `until-found` stays in the DOM, hidden, and the browser's find-in-page opens it; `keep` stays hidden in the DOM (form state survives); `unmount` drops it.
`spring`	`boolean`	Unfold on the smooth spring instead of the theme's curve.
`trigger`	`ReactNode`	The trigger's text in the props form: a button with a chevron above the content (the children).
`children`	`ReactNode`	The content, or the compound form: `Collapsible.Trigger` and `Collapsible.Content`.

Collapsible.Trigger (CollapsibleTrigger), Collapsible.Content (CollapsibleContent), Collapsible.Indicator (CollapsibleIndicator)