Reaction Bar

Component 9

About

A toggleable like, comment, repost and share pill for posts and feeds, with popping icons and counts that roll in digit by digit.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reaction Bar to your project and fits it to your theme.

Code

How Reaction Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ReactionBar } from "@/components/ui/reaction-bar";

export default function ReactionBarDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-8">
      <ReactionBar
        reactions={{
          like: { count: 128, active: true },
          comment: { count: 24 },
          repost: { count: 9 },
        }}
      />
    </div>
  );
}