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 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 toast.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/toast --files LICENSE.md,registry/ui/button.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/FloatingPortal.tsx,registry/ui/primitives/internals/FocusGuard.tsx,registry/ui/primitives/internals/ToastManager.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/popups/getElementProps.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/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/internals/visuallyHidden.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/toast/index.ts,registry/ui/primitives/toast/parts.tsx,registry/ui/toast.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/toast/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/toast/LICENSE.md ./src/components/ui/LICENSE.md

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

Selected source files (36)

3. Mount the notification viewport

Render Toaster once in your app so notifications are visible.

import { Toaster } from "./components/ui/toast";

export function App() {
  return (
    <>
      {/* Your app content */}
      <Toaster />
    </>
  );
}

Usage

import { toast } from "./components/ui/toast"

toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

Examples

Types

Set the type option to render a status icon. The built-in renderer recognizes success, info, warning, error, and loading.

TypesSource

Preview

Example requirements

Also uses: Button.

Promise

Use toast.promise to update one toast as an asynchronous task moves through loading, success, and error states.

PromiseSource

Preview

Example requirements

Also uses: Button.

Reference

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

Component source