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 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects toggle-group.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/toggle-group --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/direction-provider/index.tsx,registry/ui/primitives/internals/composite/item/CompositeItem.tsx,registry/ui/primitives/internals/composite/list/CompositeList.tsx,registry/ui/primitives/internals/composite/list/useCompositeListItem.ts,registry/ui/primitives/internals/composite/root/CompositeRoot.tsx,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/resolveStyle.ts,registry/ui/primitives/internals/types.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/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/toggle-group/ToggleGroup.tsx,registry/ui/primitives/toggle-group/ToggleGroupContext.ts,registry/ui/primitives/toggle-group/index.ts,registry/ui/primitives/toggle/Toggle.tsx,registry/ui/primitives/toggle/index.ts,registry/ui/toggle-group.tsx,registry/ui/toggle.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/toggle-group/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/toggle-group/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (34)

Usage

import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group"

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Use variant="outline" for an outline style.

OutlineSource

Preview

Size

Use the size prop to change the size of the toggle group.

SizeSource

Preview

Spacing

Use spacing to add spacing between toggle group items.

SpacingSource

Preview

Vertical

Use orientation="vertical" for vertical toggle groups.

VerticalSource

Preview

Example requirements

bun add --exact lucide-preact@1.51.0

Disabled

DisabledSource

Preview

Example requirements

bun add --exact lucide-preact@1.51.0

Custom

A custom toggle group example.

CustomSource

Preview

Example requirements

Also uses: Field.

Reference

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

Component source