Getting Started

Install the thing

npm install @vcui/popser

Base UI is a peer dependency. You need it. Don't argue.

npm install @base-ui/react

Already using shadcn?

One command. Themes, CSS variables, the lot. Skip the rest of this page, honestly.

npx shadcn add @vcode-sh/popser

More on the shadcn page if you're curious. You probably aren't.

Wire it up

Stick <Toaster> somewhere in your app. It portals to document.body because it doesn't trust your layout skills.

import { Toaster } from "@vcui/popser";
import "@vcui/popser/styles";

function App() {
  return (
    <>
      <YourApp />
      <Toaster />
    </>
  );
}

No Provider. No context wrapper. No five-layer-deep component tree. Just one component.

Pop a toast

Import toast. Call it. Event handlers, server actions, useEffect, the toilet — wherever. No hooks. No ceremony.

import { toast } from "@vcui/popser";

toast("Hello world");
toast.success("Saved");
toast.error("Something broke");
toast.info("Heads up");
toast.warning("Careful");

Every method spits back the toast ID. Keep it if you want to update or close things later.

const id = toast.loading("Uploading...");

// ...whenever your API stops napping
toast.update(id, {
  title: "Upload complete",
  type: "success",
  timeout: 3000,
});

Now what

You've got toasts. Congrats. Here's where it gets interesting:

• Toast API — every method, every option, the full arsenal
• Toaster — position, theme, limits, all the knobs
• Styling — CSS variables, classNames, Tailwind, the works
• Anchored Toasts — pin to elements, clicks, coordinates. The thing Sonner still hasn't shipped.
• Promise Toasts — loading → success → error, automatically