Skip to content
Cuelark UI
Layout

Collapsible

Show and hide a region with a measured height animation.

Collapsible hides secondary content behind a trigger (extra files, advanced settings, long details) and animates to its real measured height, with the content fading as it opens.

Preview

3 changed files
src/routes/index.tsx

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/collapsible.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/collapsible.

Usage

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

<Collapsible>
  <CollapsibleTrigger>Show more</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

API reference

Collapsible

Extends Radix Collapsible.Root (open, defaultOpen, onOpenChange).

CollapsibleTrigger · CollapsibleContent

Accessibility

  • The trigger has aria-expanded and aria-controls.
  • Height animation is skipped for reduced motion.

FAQ

Also searched as: react collapsible · shadcn collapsible · expand collapse react · show more less component · radix collapsible