NAMCHE UI

Collapsible

A single panel that toggles open and closed.

Install

pnpm dlx shadcn@latest add @namche/collapsible

Usage

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

<Collapsible>
  <CollapsibleTrigger render={<Button variant="ghost">Advanced settings</Button>} />
  <CollapsibleContent>
    <Input id="max-replicas" type="number" defaultValue={8} />
  </CollapsibleContent>
</Collapsible>

Unlike Accordion, Collapsible has no value — it is a single on/off panel, controlled with open + onOpenChange or left uncontrolled with defaultOpen. CollapsibleTrigger takes a render prop the same way Button does, so any trigger element works, not just the default button.

On this page