Animated Draw Checkbox

Component

About

Animated checkbox with draw animation

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import CheckboxCheck from "@/components/ui/motion-checkbox-check";

export default function CheckboxCheckDemo() {
  const [checked, setChecked] = React.useState(false);

  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-background">
      <label className="flex items-center gap-2 text-sm text-foreground">
        <CheckboxCheck checked={checked} onCheckedChange={setChecked} />
        Accept terms and conditions
      </label>
    </div>
  );
}