In-App Notifications
The mobile notification inbox, distinct from system push, with grouping and swipe management.
Communication & Notifications · 9 checks · 14 resources
Before you ship
9- 01Reverse chronological order — newest notifications at the top so users do not scroll for the latest
- 02Unread indicators — visually distinct from read items e.g. a dot, bolder text, or a background colour difference
- 03Mark all as read — a single action to clear all unread indicators at once
- 04Notification grouping — related notifications grouped e.g. multiple comments on the same post as a single expandable item
- 05Swipe to dismiss action — individual notifications dismissible by swiping left to reveal a delete action
- 06Deep link on tap — tapping a notification navigates directly to the relevant content
- 07Empty state — for when the user has not received any notifications yet
- 08Settings shortcut — a direct link to notification preferences for users who want to adjust what they receive
- 09Notification content — the change, author and time that triggered the notification
Resources that help you build this
14- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Chakra UI · 114 accessible React components with a token-driven styling system
- Radix UI · Unstyled accessible React primitives, plus Themes, Colors and Icons
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent Kit
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and Bitbucket
- Base UI · 37 unstyled React components from the Radix, Floating UI and MUI teams
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kits
- interior.dev · 54 MIT micro-interaction components for React, installable as a shadcn registry
- 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 HTML
- Transitions.dev · 35 essential web-app transitions, packaged as an agent skill
- BoardUI · React 19 + Tailwind v4 design system for dashboards and agent UIs — 57 components, 47 of them free through a shadcn-schema registry
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSS
- Sileo · React toast with gooey SVG morphing and spring physics, one-line API