RewardCategories

Cards 20

About

A customizable widget that displays reward categories as interactive artifacts, complete with hover animations and optional confetti celebration on click.

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

Code

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

Usage.tsx

import React from "react";
import {
  RewardCategories,
  FloatingParticles,
} from "@/components/ui/reward-categories";

const settings = {
  particleCount: 20,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen relative flex items-center justify-center bg-[#0d0d0d] overflow-hidden">
      <FloatingParticles count={s.particleCount} />
      <div className="relative z-10 w-full max-w-xl px-4">
        <RewardCategories onArtifactClick={() => {}} />
      </div>
    </div>
  );
}