Collapsible

Vinyl styling: Add animate-collapse-open / animate-collapse-close to the content for Vinyl motion.

InstallationCopy Anchor Link

npx shadcn@latest add @vinyl/collapsible

The @vinyl registry URL in components.json decides whether you get the web or the native version (see installation for web / native).

UsageCopy Anchor Link

<Collapsible>
  <CollapsibleTrigger asChild><Button variant="outline">Liner notes</Button></CollapsibleTrigger>
  <CollapsibleContent className="overflow-hidden data-[state=open]:animate-collapse-open data-[state=closed]:animate-collapse-close">
    …
  </CollapsibleContent>
</Collapsible>

APICopy Anchor Link

Same API as shadcn/ui's Collapsible on the web, and React Native Reusables' Collapsible on native. Vinyl only changes styling and motion.