Strength Ring Sign Up

A sign-up form where the password field's own border acts as a live strength meter, drawing a gradient ring as the password gets stronger and flooding the field with light once every rule is met.

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

"use client";

import StrengthRingSignUp from "@/components/ui/strength-ring-sign-up";

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#f3f1ec] px-4 py-10">
      <StrengthRingSignUp theme="paper" product="Vitrine" />
    </div>
  );
}