Sonner

Feedback

An opinionated toast notification system that stacks brief, dismissible messages in the corner of the viewport.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add sonner

Import the component directly from the package:

import { Sonner } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
className	string	Additional CSS classes to apply.

AlertBrief attention-grabbing messages.

ProgressTask completion indicator.

SkeletonLoading state placeholder.

SpinnerLoading progress indicator.

ToastTransient notification.