## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/collapsible
```
```bash
pnpm dlx shadcn@latest add @dotui/collapsible
```
```bash
yarn dlx shadcn@latest add @dotui/collapsible
```
```bash
bun x shadcn@latest add @dotui/collapsible
```
## Anatomy [#anatomy]
```tsx
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
```
```tsx
Show detailsContent
```
A collapsible carries no look of its own: `CollapsibleTrigger` is a bare button for custom layouts, and any `Button` with `slot="trigger"` works in its place. Style the open state from the root's `group-expanded/collapsible` variant. For a stack of headed sections, use [Accordion](/docs/components/accordion).
```tsx
import { Button } from "@/components/ui/button"
import { ChevronDownIcon } from "your-icon-library"
```
```tsx
Content
```
## Open state [#open-state]
Use `defaultExpanded` for uncontrolled state, or `isExpanded` with `onExpandedChange` to control it.
```tsx
const [isExpanded, setExpanded] = React.useState(false)
Show details…
```
## Examples [#examples]
## API Reference [#api-reference]
### Collapsible [#collapsible]
### CollapsibleTrigger [#collapsibletrigger]
### CollapsiblePanel [#collapsiblepanel]