Primitive · CLI

Toast

Edge toast stack with opacity+y enter/exit on Base UI Toast.

Preview

npx shadcn@latest add @atroui/toast

Stack is empty

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/toast

Source lands in your repo. Installation · Registry

Usage

Wrap the app (or stage) in ToastProvider, mount Toaster once, then call useToastManager().add. Stack offset stays on CSS vars so enter travel does not fight the pile.

tsx

import {
  ToastProvider,
  Toaster,
  useToastManager,
} from "@/components/ui/toast"
import { Button } from "@/components/ui/button"

function Notify() {
  const toast = useToastManager()
  return (
    <Button
      onClick={() =>
        toast.add({ title: "Saved", description: "Draft published." })
      }
    >
      Show toast
    </Button>
  )
}

<ToastProvider>
  <Notify />
  <Toaster />
</ToastProvider>

Primitive · CLI

Toast

Edge toast stack with opacity+y enter/exit on Base UI Toast.

Preview

npx shadcn@latest add @atroui/toast

Stack is empty

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/toast

Source lands in your repo. Installation · Registry

Usage

Wrap the app (or stage) in ToastProvider, mount Toaster once, then call useToastManager().add. Stack offset stays on CSS vars so enter travel does not fight the pile.

tsx

import {
  ToastProvider,
  Toaster,
  useToastManager,
} from "@/components/ui/toast"
import { Button } from "@/components/ui/button"

function Notify() {
  const toast = useToastManager()
  return (
    <Button
      onClick={() =>
        toast.add({ title: "Saved", description: "Draft published." })
      }
    >
      Show toast
    </Button>
  )
}

<ToastProvider>
  <Notify />
  <Toaster />
</ToastProvider>

import {
  ToastProvider,
  Toaster,
  useToastManager,
} from "@/components/ui/toast"
import { Button } from "@/components/ui/button"

function Notify() {
  const toast = useToastManager()
  return (
    <Button
      onClick={() =>
        toast.add({ title: "Saved", description: "Draft published." })
      }
    >
      Show toast
    </Button>
  )
}

<ToastProvider>
  <Notify />
  <Toaster />
</ToastProvider>