Collapsible

Installation

›pnpm dlx shadcn@latest add @evolphin/collapsible

Usage

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

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Type Definitions

interface CollapsibleProps {
  /** The controlled open state of the collapsible */
  open?: boolean;  
CollapsibleProps.open?: boolean | undefined
The controlled open state of the collapsible
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
  /** Whether the collapsible is disabled */
  ?: boolean;
}

Examples

Default

@peduarte starred 3 repositories

@radix-ui/primitives

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the collapsible.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`disabled`	`boolean`	`false`	Whether the collapsible is disabled.

CollapsibleTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

CollapsibleContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.

Search

Collapsible

@peduarte starred 3 repositories

On this page