Toaster

Feedback

Theme-aware toast notifications powered by Sonner and kit tokens.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Button, Toaster, toast } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

import { Toaster, toast } from "@nphuonha/ui-kit";

<Toaster theme="dark" />
toast.success("Saved");

Use toast.promise to show loading, success and error states.

Promise toast

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
position	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"	"bottom-right"	Screen corner for toasts.
theme	"light" \| "dark" \| "system"	"light"	Toast appearance.
richColors	boolean	false	Use semantic colors for status toasts.
closeButton	boolean	true	Show a close button.
icons	ToasterIcons	—	Custom status and close icons from any icon pack.