Components
Loading preview...
Here is assisted password confimartion component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/assisted-password-confirmation// demo.tsx
import * as React from "react";
import PasswordConfirmInput from "@/components/ui/assisted-password-confirmation";
const PasswordConfirmInputDemo = () => {
const PASSWORD_TO_MATCH = "21st.dev";
const [password, setPassword] = React.useState("");
return (
<div className="relative flex min-h-[450px] w-full items-center justify-center overflow-hidden bg-white p-10">
<div className="z-10 w-full max-w-lg">
<PasswordConfirmInput
passwordToMatch={PASSWORD_TO_MATCH}
value={password}
onChange={setPassword}
/>
</div>
<div className="pointer-events-none absolute inset-0 h-full w-full">
<div className="mx-auto flex h-full max-w-[1080px] items-center justify-between">
<div className="h-full w-[1px] bg-slate-200"></div>
<div className="h-full border-r border-dashed border-slate-200"></div>
<div className="h-full border-r border-dashed border-slate-200"></div>
<div className="h-full border-r border-dashed border-slate-200"></div>
<div className="h-full w-[1px] bg-slate-200"></div>
</div>
</div>
</div>
);
};
export { PasswordConfirmInputDemo as DemoOne };