ToastFreev1.0.0

Panes of smoked glass that stack with a peek, fan out on hover and swipe away; a status cell lit by type (a red glow for errors, cells acquiring while loading) and one cue per toast. Promise toasts go from loading to done on their own. shadcn's native Toast, cut from Lumen glass.

Built on shadcn/ui · Base UI Toast

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-toast.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-toast.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Preview

Position

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

Toaster position"bottom-right"
"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
Where toasts appear (Beautiful UI).
Toaster limit / timeout–
number
How many show at once; how long they stay.
toast.add({ title, description, type, actionProps })–
function
type: success | error | warning | info | loading.
toast.promise(promise, { loading, success, error })–
function
One toast that updates itself.

Anatomy

Same exports and data-slots as shadcn's native Toast.
Base UI Toast in both builds (shadcn has no Radix toast).
Toasts portal into the Lumen scope when one is provided.

Toasterdata-slot="toast-viewport"
Provider, portal and viewport in one; position is Beautiful UI's.
toast / createToastManager / useToastManagerdata-slot="toast"
Add, update, close and promise toasts.
Toast / ToastContent / ToastTitle / ToastDescription / ToastAction / ToastClosedata-slot="toast-content"
Build your own toast.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.0.0 · 2026-09-30All 1 entries

v1.0.0 · 2026-09-30
First release: shadcn's native Toast in Lumen Halo

Keyboard

F6: Focus the toasts
Tab: Move between actions
Escape: Dismiss the focused toast

More in Feedback

Badge

Spinner

Skeleton