Toast

Brief, non-blocking notifications. Powered by Sonner.

$ pnpm dlx shadcn@latest add https://dashral.com/r/toast.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/toast.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/toast

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Toaster, toast } from "@/components/dashral/toast"
3
4<>
5  {/* Once, in your root layout */}
6  <Toaster />
7
8  <Button onClick={() => toast.success("Invoice sent", { description: "INV-1048 to Olivia Martin" })}>
9    Send invoice
10  </Button>
11</>

Examples

Types, actions and promises

Delete with Undo

Delete at once and offer Undo in the toast, instead of asking first; Undo puts it back in place.

Q3 report.pdf2.4 MB
Brand guidelines.pdf8.1 MB
Contract — PT Nusantara.pdf640 KB
Invoice #1042.pdf120 KB

API reference

Toaster

Also takes every prop of Sonner(opens in a new tab).

Prop	Type	Default
`theme`	`"light" \| "dark" \| "system"` Follow your theme provider.	`"system"`
`position`	`string`	`"bottom-right"`

toast()

toast(message), toast.success / .error / .info / .warning / .loading / .promise.

Keyboard

Keys	Action
`Alt+T`	Jump to the toasts
`Tab`	Reach a toast's action and close buttons

Accessibility

Announced through a polite live region; important errors should also be shown on the page.

Motion

Slides in and stacks; swipe to dismiss on touch.