Sonner

Installation

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

1. Install dependencies

bun add --exact lucide-preact@1.51.0 preact@11.0.0 sonner@2.0.8 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects sonner.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/sonner --files LICENSE.md,registry/ui/primitives/LICENSE,registry/ui/sonner.tsx,registry/ui/theme.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/sonner/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/sonner/LICENSE.md ./src/components/ui/LICENSE.md

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

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

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

Usage

import { toast } from "sonner"

toast("Event has been created.")

Examples

bun add --exact sonner@2.0.8

bun add --exact sonner@2.0.8

bun add --exact sonner@2.0.8

bun add --exact sonner@2.0.8

bun add --exact sonner@2.0.8

Reference

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