Notification Center Dropdown

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

v0notificationdropdowncomponent

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.

Save this prompt to your library

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

Related prompts

Dashboard UI Component

A v0 prompt for generating an analytics dashboard with KPI cards, charts, and activity tables.

Command Palette Component

v0 prompt for a command palette component with fuzzy search, keyboard navigation, and grouped results.

Data Table with Advanced Features

v0 prompt for an advanced data table with sorting, filtering, bulk actions, and expandable rows.

Multi-Step Form Wizard

v0 prompt for a multi-step form wizard with validation, file upload, and review step.