Pill ToasterGitHub

Documentation

A succinct pill toast from Pill Toaster, built on Base UI and themed with shadcn/ui color tokens. One surface, clear status, swipe to dismiss. Install it from the shadcn registry.

Installation

Install with the shadcn CLI:

pnpm dlx shadcn@latest add https://toast.nabinkhair.com.np/r/pill-toaster.json

Mount Toaster once in your root layout:

import { Toaster } from "@/components/ui/pill-toaster"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="top-center" />
      </body>
    </html>
  )
}

Usage

Import the helper and fire a toast. Strings default to success. Prefer the typed helpers when you want an explicit status.

import { toast } from "@/components/ui/pill-toaster"

toast("Copied")
toast.success("Event created", {
  description: "Sunday, December 3 at 9:00 AM",
})
toast.error("Something went wrong")

Types

Customize the type of toast you want to render, and pass an options object as the second argument. Action and promise flows live here too.

const id = toast.add({
  title: "Event has been created",
  actionProps: {
    children: "Undo",
    onClick() {
      toast.close(id)
    },
  },
})

Position

Control placement with the position prop on Toaster. Swipe direction follows the edge the toast sits on. Optional offset sets the inset from that edge.

<Toaster position="bottom-right" offset={24} />

Click a position to move the demo toaster and render a toast there. Active: top-center

Migrate

Switching from another toast library? Copy an agent prompt, paste it into Cursor (or any coding agent), and let it rewrite imports, Toaster mounts, and call sites for Pill Toaster.

Each prompt installs from the registry, maps the old API onto toast / Toaster, and calls out gaps (custom JSX bodies, duration → timeout, dismiss → close).

API

Toaster accepts Base UI provider options plus placement helpers:

  • position — where the stack appears (default top-center)
  • offset — inset from the edge in px or CSS length
  • timeout — default auto-dismiss duration in ms (0 disables). Each toast lives until this fires (or swipe/close), so the stack grows and shrinks naturally
  • limit — optional cap on concurrently visible toasts (default unlimited). When set, older ones get data-limited and collapse out

The toast helper exposes add, update, close, promise, and the typed shortcuts above. See the Base UI Toast docs for stacking, swipe dismissal, and the primitive API.