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

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.