Sonner
An opinionated toast component for React.
Installation
import { ... } from 'nooxit-design-system/components/sonner';Notes
356px wide with 16px padding, a 6px radius and shadow-lg, stacked 12px apart.
The action is a 24px primary button in text-xs.
Toasts sit on the muted surface with no border. toast.success uses the
light green pair (success-muted) and toast.warning the light yellow one
(warning-muted), so a finished action reads as good news without shouting.
Error toasts pick up the destructive colors from the kit's separate Toast component, whose bordered action button and 24px close button are folded in here — shadcn/ui replaced Toast with Sonner, so the kit's Toast page maps onto this component.
Sonner ships its own unlayered CSS, so the overrides carry Tailwind's !
modifier to win over it.
Source — src/components/sonner.tsx
Figma — Sonner in the Nooxit UI kit