Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/collapsible.json

Usage

Use collapsible for show/hide sections that are not a full accordion.

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

export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. Free to use for personal and commercial projects.
      </CollapsibleContent>
    </Collapsible>
  );
}

Control openness with defaultOpen / open and onOpenChange. Compose a button via the trigger render prop when you need styled chrome.