How do I install the Vibe UI Toast component?

You can install Toast into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add toast" in your terminal.

Does Vibe UI Toast support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Toast component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Toast

Toast displays high-priority status notifications.

Toast

Toast displays high-priority status notifications.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add toast button

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Variations

Vibe UI's Toast component supports multiple visual style presets to match your application's theme:

Glassmorphic Style

Neon Glow Style

Retro Brutalist Style

Cyberpunk Matrix Style

Viewport Positioning

Toasts can be dispatched to specific screen coordinates using the position prop on <ToastViewport>. Supported options are top-left, top-right, top-center, bottom-left, bottom-right, and bottom-center.

Interactive Viewports

Select a position to dispatch a global notification.

Props

Toast

Prop	Type	Default	Description
variant	'default' \| 'destructive' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual theme preset style of the Toast notification.
position	'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center'	'bottom-right'	Position variant matching viewport dispatch target.

ToastViewport

Prop	Type	Default	Description
position	'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center' \| 'inline'	'bottom-right'	Screen coordinates where the list of active toasts should render.

PreviousTheme Switcher

Next Toggle