Collapsible - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/collapsible

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>
    Content here...
  </CollapsibleContent>
</Collapsible>

Examples

Controlled

Controlled open state.

File Tree

Nested file tree.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	The controlled open state.
`defaultOpen`	`boolean`	—	The default open state.
`onOpenChange`	`(open: boolean) => void`	—	Event handler for open state changes.

@peduarte starred 3 repositories

@radix-ui/primitives