npm

Collapsible

Collapsible is a control that shows or hides a single panel of content.

@viliha starred 3 repositories

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/collapsible.

Usage

Control it with `open` / `onOpenChange`, or leave it uncontrolled.

collapsible-demo.tsx
import {
  Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "@viliha/vui-ui/collapsible";

export function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Hidden content revealed here.</CollapsibleContent>
    </Collapsible>
  );
}