GitHub

Go to...

Choose a page to open.

Shows and hides a panel of content.

Collapsible

collapsible-demo

Installation

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

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
<Collapsible>
  <CollapsibleTrigger>Show variables</CollapsibleTrigger>
  <CollapsibleContent>REDIS_URL</CollapsibleContent>
</Collapsible>

To use another component as the trigger, pass it to the render prop.

<CollapsibleTrigger render={<Button variant="ghost" />}>
  Show variables
</CollapsibleTrigger>