shadcn-preact
Components

Collapsible

An interactive component which expands/collapses a panel.

PreviewSource

Order #4189

StatusShipped
Example requirements

Also uses: Button.

bun add --exact lucide-preact@1.51.0

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects collapsible.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/collapsible --files LICENSE.md,registry/ui/collapsible.tsx,registry/ui/primitives/LICENSE,registry/ui/primitives/collapsible/index.parts.ts,registry/ui/primitives/collapsible/index.ts,registry/ui/primitives/collapsible/panel/CollapsiblePanel.tsx,registry/ui/primitives/collapsible/panel/useCollapsiblePanel.ts,registry/ui/primitives/collapsible/root/CollapsibleRoot.tsx,registry/ui/primitives/collapsible/root/CollapsibleRootContext.ts,registry/ui/primitives/collapsible/root/stateAttributesMapping.ts,registry/ui/primitives/collapsible/root/useCollapsibleRoot.ts,registry/ui/primitives/collapsible/trigger/CollapsibleTrigger.tsx,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/createBaseUIEventDetails.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveRef.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/stateAttributesMapping.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useAnimationFrame.ts,registry/ui/primitives/internals/useAnimationsFinished.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useControlled.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useOnMount.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/internals/useTransitionStatus.ts,registry/ui/primitives/merge-props/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/collapsible/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/collapsible/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/collapsible. Existing components stay in place; shared source files are updated from main.

Selected source files (36)

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>

Examples

Basic

BasicSource
Preview
Example requirements

Also uses: Button, Card.

bun add --exact lucide-preact@1.51.0

Settings Panel

Use a trigger button to reveal additional settings.

Settings PanelSource
Preview
Example requirements

Also uses: Button, Card, Field, Input.

bun add --exact lucide-preact@1.51.0

File Tree

Use nested collapsibles to build a file tree.

File TreeSource
Preview
Example requirements

Also uses: Button, Card, Tabs.

bun add --exact lucide-preact@1.51.0

Reference

See the official Collapsible documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source