Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/gradient-selector-card"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>
);
}