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 switch.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/switch --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/checkbox/root/CheckboxRoot.tsx,registry/ui/primitives/checkbox/root/CheckboxRootContext.ts,registry/ui/primitives/checkbox/utils/useStateAttributesMapping.ts,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/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/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useCheckable.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/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/switch/index.parts.ts,registry/ui/primitives/switch/index.ts,registry/ui/primitives/switch/root/SwitchRoot.tsx,registry/ui/primitives/switch/root/SwitchRootContext.ts,registry/ui/primitives/switch/stateAttributesMapping.ts,registry/ui/primitives/switch/thumb/SwitchThumb.tsx,registry/ui/switch.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/switch/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/switch/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (38)

Usage

import { Switch } from "./components/ui/switch"

<Switch />

Examples

Description

DescriptionSource

Preview

Example requirements

Also uses: Field.

Choice Card

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

Choice CardSource

Preview

Example requirements

Also uses: Field.

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

DisabledSource

Preview

Example requirements

Also uses: Field.

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

InvalidSource

Preview

Example requirements

Also uses: Field.

Size

Use the size prop to change the size of the switch.

SizeSource

Preview

Example requirements

Also uses: Field.

Reference

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

Component source