Radio Group (Fluid Hover)

Forms 4

About

An animated radio button group whose selection dot springs into place and whose rows light up with a fluid hover highlight that follows the cursor, built on the Base UI radio primitive.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radio Group (Fluid Hover) to your project and fits it to your theme.

Code

How Radio Group (Fluid Hover) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RadioGroup, RadioItem } from "@/components/ui/radio-group-base";
import React from "react";

function RadioGroupDemo() {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <div className="flex items-center justify-center w-full min-h-[400px] bg-background px-8 py-12">
      <RadioGroup selectedIndex={selectedIndex}>
        <RadioItem
          label="Option A"
          index={0}
          onSelect={() => setSelectedIndex(0)}
        />
        <RadioItem
          label="Option B"
          index={1}
          onSelect={() => setSelectedIndex(1)}
        />
        <RadioItem
          label="Option C"
          index={2}
          onSelect={() => setSelectedIndex(2)}
        />
      </RadioGroup>
    </div>
  );
}

export default RadioGroupDemo;