Get everything for $99, lifetime

Components

Reaction Arc

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/reaction-arc

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { ReactionArc } from "@/components/ui/ReactionArc";
import { ThumbsUp, Heart, Lightbulb } from "lucide-react"

<ReactionArc
  size={44}
  reactions={[
    { label: "Like", Icon: ThumbsUp, color: "#2f7fe0" },
    { label: "Love", Icon: Heart, color: "#d94e3c" },
    { label: "Insightful", Icon: Lightbulb, color: "#e09a2f" },
  ]}
/>

Use cases

  • Social engagement

    Facebook-style Like button where the picked reaction arcs back onto the button.

  • Chat reactions

    Slack/iMessage-style emoji reactions that visibly travel from picker to trigger.

  • Add-to-collection

    Any item-flies-to-target pattern — save, bookmark, or add-to-cart feedback.

  • Gamified feedback

    Points or rewards that lob into a score badge with a spring-pop landing.