Updated October 2026
CSS Overrides & Headless Unstyled Mode
Customize styles via Tailwind classes, classNames sub-object targeting, or completely unstyled headless mode.
classNames Sub-Object
Target granular internal DOM nodes with Tailwind or custom CSS classes:
typescript
toast.success('File synced', {
classNames: {
toast: 'shadow-2xl border-blue-500/30',
title: 'font-mono text-sm tracking-tight',
description: 'text-xs text-blue-200',
actionButton: 'bg-blue-600 hover:bg-blue-500 text-white',
closeButton: 'hover:bg-white/10',
},
});
`
Unstyled Mode
Pass unstyled: true to strip all default library CSS while retaining accessibility, keyboard navigation, and physics gestures:
typescript
toast('Raw notification', {
unstyled: true,
className: 'my-custom-toast-container',
});Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.