caliper uidocs
DemoSign inGet Pro

Collapsible

Free

A single disclosure for optional detail.

Installs components/ui/collapsible.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/collapsible.json
Late arrivals use the side door and the code on the booking.

When to use #

Use it for

  • Advanced options and secondary notes.
  • Keeping a page short without hiding the existence of detail.

Skip it when

  • Several related items; use an accordion.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/collapsible.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Collapsible } from "@/components/ui/collapsible"

export function ArrivalNotes() {
  return (
    <div className="w-full max-w-sm">
      <Collapsible title="Arrival notes">Late arrivals use the side door and the code on the booking.</Collapsible>
    </div>
  );
}

API reference #

Collapsible

component
PropTypeDefault
title *string—
children *ReactNode—
openboolean—
defaultOpenbooleanfalse
onOpenChange((open: boolean) => void)—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-expanded, aria-controls and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.