Skip to main content

​
Installation

npm install @kuzenbo/core

​
Usage

import { Collapsible } from "@kuzenbo/core";
import { ChevronDownIcon } from "lucide-react";

function Example() {
  return (
    <Collapsible>
      <Collapsible.Trigger>
        <ChevronDownIcon />
        Show more
      </Collapsible.Trigger>
      <Collapsible.Content>
        Additional content that can be toggled.
      </Collapsible.Content>
    </Collapsible>
  );
}

​
Props

​
Collapsible

​
defaultOpen
boolean
The default open state (uncontrolled mode).
​
open
boolean
The controlled open state.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
disabled
boolean
Whether the collapsible is disabled.
​
className
string
Additional CSS classes to apply.

​
Collapsible.Trigger

​
className
string
Additional CSS classes to apply.

​
Collapsible.Content

​
className
string
Additional CSS classes to apply.

​
Advanced Patterns

​
Controlled State

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>
    Content
  </Collapsible.Content>
</Collapsible>

​
Custom Trigger

<Collapsible>
  <Collapsible.Trigger asChild>
    <Button variant="outline">
      <ChevronDownIcon className="transition-transform data-open:rotate-180" />
      Expand
    </Button>
  </Collapsible.Trigger>
  <Collapsible.Content>
    Content
  </Collapsible.Content>
</Collapsible>

Build docs developers (and LLMs) love

Get started for freeTalk to us