スタイル内包の React UI コンポーネント・イラスト・アニメーション集、shadcn CLI またはコピペで導入

npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

{
  "registries": {
    "@affectui": "https://www.affectui.com/r/{name}.json"
  }
}

npx shadcn@latest add @affectui/reaction-bar

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

export function PostActions({ post }) {
  return (
    <ReactionBar
      reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }}
      onReact={(key, state) => api.react(post.id, key, state.active)}
    />
  );
}