CollapsibleNew

One section that opens and closes under its title.

$ pnpm dlx shadcn@latest add @dashral/collapsible

Project name

Installation

$ pnpm dlx shadcn@latest add @dashral/collapsible

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/collapsible.json

Usage

example.tsx

1import { Input } from "@/components/dashral/input"
2import { Collapsible } from "@/components/dashral/collapsible"
3
4<Collapsible title="Advanced settings">
5  <Input label="Slug" defaultValue={project.slug} />
6</Collapsible>

Using the npm package? Import from @dashral/ui/components/collapsible instead, here and in the examples; the rest is the same.

Examples

Your own trigger

trigger takes a Button; open and onOpenChange control it.

Order summary

meta puts the total in the title's row; the lines fold under it.

API reference

Collapsible

Also takes every prop of Radix Collapsible(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` Makes the trigger: a full-width button with a chevron.	—
`trigger`	`ReactElement` Your own trigger in place of the title's, e.g. a Button.	—
`meta`	`ReactNode` With title: at the end of its row, before the chevron, e.g. a count.	—
`children`	`ReactNode` What opens and closes.	—
`open / defaultOpen / onOpenChange`	Control it yourself, or start it open.	—
`disabled`	`boolean` It can't be opened or closed.	`false`
`classNames`	`{ trigger, content }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open or close

Accessibility

The trigger has aria-expanded and aria-controls pointing at the content.

Motion

Opening, the height grows at a calm pace (--duration-considered) while the content fades in, dropping a little. Closing, the content fades out first while the height waits, then gathers speed (--ease-exit), so no line is cut through. The chevron turns on the spring.