shadcn

One command:

npx shadcn add https://popser.vcui.dev/r/popser.json

Installs @vcui/popser, adds a wrapper component, sorts the CSS imports. You're done.

Using a namespace

If you'd rather type less every time, add the registry to your components.json:

{
  "registries": {
    "@vcode-sh": "https://popser.vcui.dev/r/{name}.json"
  }
}

Then install with:

npx shadcn add @vcode-sh/popser

What you get

The registry component wraps <Toaster> with:

• next-themes — reads resolvedTheme, passes it to popser
• CSS variable merging — maps shadcn tokens to --popser-*
• Sensible defaults — richColors on, "system" theme
• Full prop passthrough — every ToasterProps works

Usage

import { toast } from "@vcui/popser";
import { Toaster } from "@/components/ui/popser";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  );
}

// anywhere
toast.success("Saved");

Customisation

Forwards everything:

<Toaster
  position="top-center"
  limit={5}
  timeout={3000}
  closeButton="always"
/>

Theme

Reads resolvedTheme from next-themes. Dark mode works if you've got next-themes set up. Which you do. Because you're using shadcn.

No next-themes? Pass it manually:

<Toaster theme="dark" />

Styling

Merges shadcn's CSS variables with popser's defaults. Your theme colours apply automatically. Override specific tokens if needed:

:root {
  --popser-radius: var(--radius);
  --popser-bg: hsl(var(--card));
  --popser-fg: hsl(var(--card-foreground));
  --popser-border: hsl(var(--border));
}

Dependencies

• @vcui/popser — installed automatically
• next-themes — installed automatically
• @vcui/popser/styles — imported in the component

You don't need to think about any of this.

Manual setup

Prefer the scenic route? Install manually:

npm install @vcui/popser

Import styles, use <Toaster> directly. No wrapper. No next-themes. Just raw popser.