Build a complete toast notification system.

Toast Types:
- Success (green checkmark)
- Error (red X)
- Warning (yellow triangle)
- Info (blue info icon)
- Loading (spinner)
- Custom (user-defined icon/color)

Features:
- Stackable notifications
- Auto-dismiss with progress bar
- Manual dismiss button
- Action buttons within toast
- Promise-based API (loading → success/error)
- Position options (top-right, bottom-right, etc.)

Animation Requirements:
- Slide in from edge
- Stack compression when multiple
- Smooth exit animation
- Progress bar countdown

API Design:
```typescript
toast.success("Saved successfully!")
toast.error("Something went wrong")
toast.promise(saveData(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Failed to save"
})
```

Implementation:
- Context provider for global access
- Portal for proper rendering
- Framer Motion for animations
- Customizable duration and styling

Related Prompts

View all

Animated Pricing Table Component

Create a stunning animated pricing table component. Design Requirements: - Three-tier layout (Basic...

PricingAnimation

Drag & Drop File Upload

Build a polished drag-and-drop file upload component. Features: - Drag and drop zone with visual fe...

File UploadDrag Drop

Command Palette (CMD+K)

Create a Spotlight/Linear-style command palette. Functionality: - Global keyboard shortcut (CMD/CTR...

Command PaletteSearch

Glassmorphic Login Page

Create a stunning glassmorphic login experience. Visual Design: - Gradient mesh animated background...

GlassmorphismLogin

Back to prompts

Build a complete toast notification system.

Toast Types:
- Success (green checkmark)
- Error (red X)
- Warning (yellow triangle)
- Info (blue info icon)
- Loading (spinner)
- Custom (user-defined icon/color)

Features:
- Stackable notifications
- Auto-dismiss with progress bar
- Manual dismiss button
- Action buttons within toast
- Promise-based API (loading → success/error)
- Position options (top-right, bottom-right, etc.)

Animation Requirements:
- Slide in from edge
- Stack compression when multiple
- Smooth exit animation
- Progress bar countdown

API Design:
```typescript
toast.success("Saved successfully!")
toast.error("Something went wrong")
toast.promise(saveData(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Failed to save"
})
```

Implementation:
- Context provider for global access
- Portal for proper rendering
- Framer Motion for animations
- Customizable duration and styling