🏄♂️
Surfer
Design System
Design Story
Components
Examples
Documentation
Contact
Get Started
Open menu
Back to Categories
Feedback
Alerts, dialogs, and user feedback components with Surfer design system styling
Alert
Display important messages and notifications
Info
This is an informational alert message.
Error
Something went wrong. Please try again.
Success
Your changes have been saved successfully.
Dialog
Modal dialog for user interaction
Open Dialog
Alert Dialog
Confirm destructive actions with the user
Delete Account
Drawer
Slide-out panel for mobile-optimized interactions
Open Drawer
Tooltip
Show contextual information on hover
Hover me
Bottom tooltip
Hover Card
Rich hover preview with detailed information
@shadcn
Popover
Floating content panel triggered by click
Open popover
Sonner (Toast)
Toast notifications for user feedback
Simple Toast
Success Toast
Error Toast
Action Toast
Pill Status Badges
New pill-shaped status badges for feedback states
Feedback Status
Success
Warning
Error
Info
Notification Badges
3 New Messages
5 Pending Tasks
All Done
User Status
Online
Away
Busy
Offline
Interactive Badges
Feedback Tag
×
Resolved
×
In Progress
×