shadcn-preact
Components

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

PreviewSource

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

Installation

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

1. Install dependencies

bun add --exact cn@0.4.0 lucide-preact@1.51.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects accordion.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/accordion --files LICENSE.md,registry/ui/accordion.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/accordion/header/AccordionHeader.tsx,registry/ui/primitives/accordion/index.parts.ts,registry/ui/primitives/accordion/index.ts,registry/ui/primitives/accordion/item/AccordionItem.tsx,registry/ui/primitives/accordion/item/AccordionItemContext.ts,registry/ui/primitives/accordion/item/stateAttributesMapping.ts,registry/ui/primitives/accordion/panel/AccordionPanel.tsx,registry/ui/primitives/accordion/root/AccordionRoot.tsx,registry/ui/primitives/accordion/root/AccordionRootContext.ts,registry/ui/primitives/accordion/trigger/AccordionTrigger.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/direction-provider/index.tsx,registry/ui/primitives/internals/composite/list/CompositeList.tsx,registry/ui/primitives/internals/composite/list/useCompositeListItem.ts,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/createBaseUIEventDetails.ts,registry/ui/primitives/internals/direction-context.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/accordion/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/accordion/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (47)

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./components/ui/accordion"
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

BasicSource
Preview

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

MultipleSource
Preview

Disabled

Use the disabled prop on AccordionItem to disable individual items.

DisabledSource
Preview

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

BordersSource
Preview

Card

Wrap the Accordion in a Card component.

CardSource
Preview
Example requirements

Also uses: Card.

Reference

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

Component source