ComponentsNew
Notification Toast
A phone-style notification card: slides in from above, grows a little on hover and closes with a cross.
Customize
tileFrom
tileTo
background
Based on ugly-stingray-77 by JohnnyCSilva (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| title | string | "Build finished" | Bold first line. |
| time | string | "2 min ago" | Small note on the right, such as the time. |
| message | string | "Your preview is ready to open." | Second line. |
| icon | ReactNode | — | Content of the square tile on the left, such as an app icon. |
| tileFrom | string | "#f5f5f5" | Top color of the tile gradient. |
| tileTo | string | "#525252" | Bottom color of the tile gradient. |
| background | string | "#262626" | Card background. |
| dismissible | boolean | true | Show a close button. |
| onDismiss | () => void | — | Called after the card is closed. |
| animateIn | boolean | true | Slide in from above on appear. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge