Build your component library

Installation

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

1. Install dependencies

bun add --exact class-variance-authority@0.7.1 cn@0.4.0 embla-carousel-react@8.6.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 carousel.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/carousel --files LICENSE.md,registry/ui/button.tsx,registry/ui/carousel.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/button/Button.tsx,registry/ui/primitives/button/index.ts,registry/ui/primitives/internals/composite/root/CompositeRootContext.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/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/merge-props/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/carousel/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/carousel/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (22)

Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "./components/ui/carousel"

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Sizes

To set the size of the items, you can use the basis utility class on the <CarouselItem />.

SizesSource

Preview

Example requirements

Also uses: Card.

Spacing

To set the spacing between the items, we use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.

SpacingSource

Preview

Example requirements

Also uses: Card.

Orientation

Use the orientation prop to set the orientation of the carousel.

OrientationSource

Preview

Example requirements

Also uses: Card.

API

Use a state and the setApi prop to get an instance of the carousel API.

APISource

Preview

Example requirements

Also uses: Card.

Plugins

You can use the plugins prop to add plugins to the carousel.

PluginsSource

Preview

Example requirements

Also uses: Card.

bun add --exact embla-carousel-autoplay@8.6.0

Multiple

MultipleSource

Preview

Example requirements

Also uses: Card.

Reference

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

Component source