Notification Item
Notification row with icon, title, description, timestamp, and unread indicator.
New comment from Jordan
Loved the update. The new flow feels faster.
2 minutes ago
Alex liked your post
Your design system article received a new like.
1 hour ago
Weekly digest ready
Your activity summary for this week is available.
2 days ago
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/notification-item.tsx
Installation
Using shadcn CLI
npx shadcn add notification-item --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Feedback Components
Alert Banner
Full-width dismissible banner for announcements with icon and close button.
Announcement Banner
Dismissible banner with icon, message, and optional action button.
Badge
Small badge component with multiple style variants for labels or tags.
Badge Group
Grouped badges for displaying multiple status labels or tags.
Callout
Information callout box with tip, info, warning, and danger variants. Supports collapsible content.
Empty State
Centered empty state placeholder with icon, text, and optional action.