Gradient Selector Card

This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented by a glowing circle, and the currently selected option triggers radial background effects and orbiting dots for visual emphasis. Perfect for onboarding flows, pricing tiers, goal selection, slider replacement or any UI needing a visually rich, progressive milestone picker.

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

"use client";

import { GradientSelector, type GradientOption } from "@/components/ui/gradient-selector-card";

export default function Demo() {
  const handleSelectionChange = (option: GradientOption, index: number) => {
    console.log("Selected:", option.label, "Index:", index);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <GradientSelector
        defaultSelected="5m"
        onSelectionChange={handleSelectionChange}
        className="w-full max-w-3xl"
      />
    </div>
  );
}