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 cn@0.4.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 slider.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/slider --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/direction-provider/index.tsx,registry/ui/primitives/field/control/FieldControl.tsx,registry/ui/primitives/internals/FieldRootContext.ts,registry/ui/primitives/internals/FieldsetRootContext.ts,registry/ui/primitives/internals/LabelableContext.ts,registry/ui/primitives/internals/clamp.ts,registry/ui/primitives/internals/composite/list/CompositeList.tsx,registry/ui/primitives/internals/composite/list/useCompositeListItem.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/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useControlled.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRegisterFieldControl.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/internals/visuallyHidden.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/slider/control/SliderControl.tsx,registry/ui/primitives/slider/index.parts.ts,registry/ui/primitives/slider/index.ts,registry/ui/primitives/slider/indicator/SliderIndicator.tsx,registry/ui/primitives/slider/root/SliderRoot.tsx,registry/ui/primitives/slider/root/SliderRootContext.ts,registry/ui/primitives/slider/root/stateAttributesMapping.ts,registry/ui/primitives/slider/thumb/SliderThumb.tsx,registry/ui/primitives/slider/thumb/prehydrationScript.min.ts,registry/ui/primitives/slider/track/SliderTrack.tsx,registry/ui/primitives/slider/utils/getPushedThumbValues.ts,registry/ui/primitives/slider/utils/resolveThumbCollision.ts,registry/ui/primitives/slider/utils/roundValueToStep.ts,registry/ui/slider.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/slider/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/slider/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (43)

Usage

import { Slider } from "./components/ui/slider"

<Slider defaultValue={[33]} max={100} step={1} />

Examples

Range

Use an array with two values for a range slider.

RangeSource

Preview

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

Multiple ThumbsSource

Preview

Vertical

Use orientation="vertical" for a vertical slider.

VerticalSource

Preview

Controlled

ControlledSource

Preview

Example requirements

Also uses: Label.

Disabled

Use the disabled prop to disable the slider.

DisabledSource

Preview

Reference

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

Component source