Shadcn.io is not affiliated with official shadcn/ui
Comments Mentions
A comment system with @mention autocomplete for React and Next.js featuring user suggestions, notification triggers, and highlighted mentions built with shadcn/ui and Tailwind CSS
Build collaborative discussions with this @mention comment block for React and Next.js. Features real-time autocomplete dropdown triggered by @ symbol, fuzzy search filtering across team members, clickable highlighted mentions in posted comments, and notification trigger events for mentioned users. Built with TypeScript, shadcn/ui Popover, Command, Avatar, and Badge components, motion/react dropdown animations, and Tailwind CSS. Perfect for team collaboration tools, project management apps, and social platforms.
Related Components
Basic Comments
Simple threaded comments
Rich Text Comments
Comments with markdown formatting
Reactions Comments
Comments with emoji reactions
Nested Threads Comments
Deep nested comment threads
Voting Comments
Comments with upvote/downvote
Moderation Comments
Admin comment moderation
FAQ
Was this page helpful?
Sign in to leave feedback.
Mention Autocomplete
An @-mention autocomplete comment section for React and Next.js with fuzzy search, keyboard navigation, and user avatars built with shadcn/ui and Tailwind CSS
Moderation
An admin comment moderation interface for React and Next.js with flag review, bulk actions, and approval queue built with shadcn/ui and Tailwind CSS