Make your AI a shadcn expert

Empty State No Comments

An empty comments state with a centered speech bubble icon, conversation-starting message, and add comment CTA using shadcn/ui and Tailwind CSS

Scroll to load preview

Display a clean empty state when an item has no comments. Features a centered message-circle icon inside a subtle bubble shape, encouraging copy to start the conversation, and a primary add comment button. Built with TypeScript, shadcn/ui Button and Input, motion/react animations, Lucide icons, and Tailwind CSS. Perfect for blog posts, task detail views, pull request pages, and any content with a comment section.

FAQ

Last updated on April 3, 2026

Was this page helpful?

Sign in to leave feedback.