Notification Github Style
A GitHub-style notification block for React and Next.js with pull request reviews, issue assignments, CI check statuses, and release events with monospace repo names and staggered entrance animations built with shadcn/ui and Tailwind CSS
Display GitHub-style notifications with this developer-focused notification block for React and Next.js. Features four notification types — pull request review requested, issue assigned, CI check failed, and release published — each with repository name in monospace, actor attribution, action description, and semantic status indicators with smooth Framer Motion staggered entrance animations. Built with TypeScript, shadcn/ui Badge and Button components, Framer Motion for staggered animations, and Tailwind CSS. Perfect for developer dashboards, CI/CD monitoring panels, and open-source project notification feeds.
Related Components
Toast Stack
Stacked toast notification system
Slack Style
Slack-style channel notifications
Email Preview
Email notification preview cards
Cookie Consent
Cookie consent banner with options
Table Blocks
Data table layouts
Dashboard Blocks
Dashboard components and widgets
FAQ
Was this page helpful?
Sign in to leave feedback.
Floating
A floating notification popup block for React and Next.js with bottom-right slide-in animation, icon badge, action button, and dismiss control built with shadcn/ui and Tailwind CSS
Grouped
A grouped notifications block for React and Next.js with collapsible type groups, badge counts, ChevronDown expand transitions, and staggered entrance animations built with shadcn/ui and Tailwind CSS