Sonner

A toast notification system for displaying temporary messages to users.

Sonner provides elegant, animated toast notifications that appear at the edge of the screen to communicate status updates, success messages, errors, or other brief information. Toasts automatically dismiss after a few seconds and can be stacked when multiple notifications appear simultaneously.

Installation


npm install @strongtie/design-system

import { Sonner } from "@strongtie/design-system/sonner"

Props

All components accept standard HTML attributes and React props.

Example

import { Sonner } from "@strongtie/design-system/sonner"
 
export default function Example() {
  return <Sonner>{/* Your content here */}</Sonner>
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Slider Spinner

On This Page

Installation Props Example Styling Accessibility

Contribute