Notification Center Dropdown

v0v0notificationdropdowncomponent

v0 prompt for a notification center dropdown with tabs, notification types, and inline actions.

Prompt

Create a notification center dropdown component:

- Bell icon button with unread count badge (red dot with number)
- Dropdown panel on click (not hover)
- Header: "Notifications" title + "Mark all as read" link
- Tab filters: All, Unread, Mentions
- Notification list with:
  - User avatar
  - Action text ("John commented on your post")
  - Timestamp ("2 hours ago", "Yesterday")
  - Unread indicator (blue dot)
  - Hover action: "Mark as read" / "Delete"
- Different notification types with icons:
  - Comment (💬), Like (❤️), Mention (@), System (⚙️), Alert (⚠️)
- Click notification to navigate (different action per type)
- Empty state: "All caught up! No new notifications"
- Footer: "View all notifications" link
- Max height with scroll
- Smooth entrance animation (slide down + fade)

Use shadcn/ui Popover, Avatar, Badge, Tabs. Style with Tailwind CSS. Make the dropdown responsive — full-width on mobile.

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE

Development

Code Review

Testing

Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP

$ npm i -g @promptingbox/mcp

Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.