SmoothUI

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.

Open in v0

Last updated: January 5, 2026

E

Edu Calvo

Just now

What happens if we adjust this to handle a light and dark mode? I'm not sure if we're ready to handle...

Installation

pnpm dlx shadcn add @smoothui/figma-comment
npx shadcn@latest add @smoothui/figma-comment
yarn dlx shadcn add @smoothui/figma-comment
bunx shadcn add @smoothui/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

Props

Expandable Cards

Cards that expand to reveal more content with smooth motion.

Glow Hover Cards

Cards with a glowing hover effect that follows your cursor, creating an interactive spotlight effect.

On this page

Installation
Features
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev