Notifications
Communication & Notifications · 7 checks · 41 resources
The in-product notification centre that collects activity and lets the user clear it.
Before you ship
- 01Notification list — a chronological feed of alerts, messages and activity updates for the user
- 02Read and unread states — a clear visual distinction, with an unread count on the icon that opens the centre
- 03Notification type — a visual or label indicating type e.g. mention, system alert, billing event
- 04Timestamp — relative time for recent items, a complete date and time for older ones
- 05Actions — an action related to the event where relevant e.g. a reply button on a direct message notification
- 06Mark all as read — a single action to clear all unread indicators at once
- 07Empty state — a clear message when there are no notifications
Resources that help you build this
- Apple Human Interface Guidelines · Apple’s official design guidance for iOS, iPadOS, macOS, watchOS, tvOS and visionOSDesign Systems & Brand GuidelinesS
- Ark UI · 49 headless components with one API across React, Vue, Solid and SvelteComponent LibrariesS
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templatesComponent LibrariesS
- Chakra UI · 114 accessible React components with a token-driven styling systemComponent LibrariesS
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themesComponent LibrariesS
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skillsComponent LibrariesS
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-pasteComponent LibrariesS
- Mantine · 150+ styled React components, 70+ hooks, CSS modules, no runtime CSS-in-JSComponent LibrariesS
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web codeDesign Systems & Brand GuidelinesS
- Mobbin · Searchable library of real mobile and web app screens, organized into user flowsInspiration GalleriesS
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screensAgent Design ToolingS
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickersComponent LibrariesS
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLIComponent LibrariesS
- shadcn/ui (GitHub) · Source monorepo for shadcn/ui: components, CLI, registry schema, skillsComponent LibrariesS
- UI TripleD · 282-item shadcn registry of motion components, sections and full pagesComponent LibrariesS
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP serverComponent LibrariesS
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txtDesign Systems & Brand GuidelinesS
- AlignUI · React + Tailwind design system with a code-synced Figma libraryComponent LibrariesA
- Ant Design · 73-component React library and design language for enterprise back-office appsComponent LibrariesA
- Appica UI · 70 React components on Base UI and Tailwind v4, with an llms.txt and markdown docsComponent LibrariesA
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and BitbucketDesign Systems & Brand GuidelinesA
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registryComponent LibrariesA
- Carbon Design System · IBM's open-source design system: 44 documented components across five frameworksDesign Systems & Brand GuidelinesA
- Flowbite · 56+ MIT Tailwind components with vanilla-JS behaviour, plus a paid 450+ block libraryComponent LibrariesA
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kitsDesign Systems & Brand GuidelinesA
- HyperUI · 537 free MIT Tailwind blocks across application, marketing and neobrutalism setsBlocks, Templates & ThemesA
- Kinetics · 153 spring-physics micro-interactions with copy-paste CSS and ReactMotion & InteractionA
- Liveblocks · Realtime sync, comments, notifications, and editors as ready components for collaborative appsComponent LibrariesA
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTMLComponent LibrariesA
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLIComponent LibrariesA
- Spectrum UI · 255 shadcn registry items, 62 component guides, 34 blocks and an MCP installerComponent LibrariesA
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and nativeComponent LibrariesA
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitivesComponent LibrariesA
- Animate UI · 73 motion-first React components shipped as a shadcn registryMotion & InteractionB
- BoardUI · React 19 and Tailwind v4 components for dashboards and agent interfaces, with an MIT free tier and paid Pro catalogComponent LibrariesB
- Cuelume · 17 synthesized UI sounds via Web Audio, zero runtime depsMotion & InteractionB
- Empty States · 235 curated screenshots of empty-state UI from real shipped appsInspiration GalleriesB
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSSComponent LibrariesB
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiringComponent LibrariesB
- Primer · GitHub's design system: 62 React components, Octicons and design tokensDesign Systems & Brand GuidelinesB
- Pando (Pluralsight Design System) · Pluralsight's design system documented in zeroheight; public code frozen at v0.7.1Design Systems & Brand GuidelinesC