Figma Comment

An animated comment bubble component inspired by Figma's comment system. Expands from a small avatar to show full comment details with smooth spring animations.

Installation

npx smoothui-cli add figma-comment

Features

• Smooth spring animations for expand/collapse
• Click outside to close functionality
• Customizable width and content
• Notification indicator support
• Responsive height measurement
• Accessible with reduced motion support

Accessibility

Screen Reader

• The avatar uses an AvatarImage with an alt attribute and an AvatarFallback showing the author's initial.
• The click-outside handler allows dismissing the comment by interacting elsewhere.

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the expand/collapse spring animations and content blur transitions are disabled, and the container resizes instantly.

Props

Created by

Edu Calvo

Powered by

motion.dev