# Collapsible: Open by default

> `defaultOpen` starts the panel open without taking over its state.

Example: https://hextaui.com/docs/collapsible/examples/open-by-default
Component docs: https://hextaui.com/docs/collapsible.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/collapsible-open-by-default.json
```

This adds `components/examples/collapsible/open-by-default.tsx` with the Collapsible component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/collapsible/open-by-default.tsx"
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleOpenByDefault() {
  return (
    <Collapsible defaultOpen className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex items-center justify-between gap-4 ps-4">
        <h4 className="text-sm font-semibold">
          <span dir="ltr">@preetsuthar17</span> starred 3 repositories
        </h4>
        <CollapsibleTrigger
          render={<Button variant="ghost" size="icon-sm" />}
          aria-label="Toggle repositories"
        >
          <CollapsibleTriggerIcon />
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">
        <span dir="ltr">@radix-ui/primitives</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          <span dir="ltr">@base-ui/react</span>
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          <span dir="ltr">@tabler/icons</span>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

## Props in this example

### Collapsible

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultOpen` | `boolean` | `false` |  |

### CollapsibleTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` | Usually a Button. |

### CollapsibleContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | – | Applied to the inner wrapper, so padding never fights the height animation. |

## More Collapsible examples

- [Show more](https://hextaui.com/docs/collapsible/examples/show-more.md)
- [Controlled](https://hextaui.com/docs/collapsible/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/collapsible/examples/disabled.md)
- [Custom icon](https://hextaui.com/docs/collapsible/examples/custom-icon.md)
- [File tree](https://hextaui.com/docs/collapsible/examples/file-tree.md)
- [Inside a card](https://hextaui.com/docs/collapsible/examples/card.md)
- [Unmounted when closed](https://hextaui.com/docs/collapsible/examples/unmounted.md)
- [Long content](https://hextaui.com/docs/collapsible/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/collapsible/examples/rtl.md)