[bug]: Generated sonner.tsx missing "use client" directive

Describe the bug

When executing the following command:

pnpx shadcn@latest add sonner

the generated file sonner.tsx is missing the "use client".

Because the file uses useTheme from next-themes, compilation fails since this hook can only be called in a client component.

Expected behavior

The generated sonner.tsx file should include "use client" at the top so it can be used directly without modification.

Current generated file

import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }

Working file with fix

"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }

Note: The manual installation instructions for this component (shadcn-ui sonner) include "use client", which shows that the directive is intended and should be present in the generated file.

Temporary workaround

Until the generator is fixed, you can create a wrapper file that re-exports the component with "use client" at the top:

// ./components/sonner-fixed.tsx

"use client";

export { Toaster } from "../ui/sonner"

Then, import Toaster from this wrapper file instead of the generated sonner.tsx.

Additional context

Since these files are autogenerated, editing them directly is not ideal. Adding "use client" should be part of the generation step.

In my setup I run:

pnpx shadcn@latest add --all --overwrite

to keep components in sync across a monorepo, which means I do not update files individually. Updating components individually would allow working around this issue by manually adjusting the synced file, but to me that is not practical.

Affected component/components

sonner

How to reproduce

1. Run pnpx shadcn@latest add sonner
2. Import and use the generated Toaster component in layout.tsx
3. Compile the Next.js app
4. Observe the following error

Uncaught Error: Attempted to call useTheme() from the server but useTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

Codesandbox/StackBlitz link

No response

Logs

System Info

Windows 11
Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues