Animated React form components
Auth card
Sign in and sign up in one card. Switch modes and it changes in place: a name field grows in, a strength meter fills, and every label rolls to its new words.
Forms, press and type, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/auth-card.tsx https://motion-brew.com/r/auth-card.tsxOne self contained file for React and Tailwind CSS: auth-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { AuthCard } from "@/components/auth-card";
export default function Login() {
return (
<AuthCard
onSubmit={async ({ mode, email, password, name }) => {
if (mode === "signup") await api.signUp({ name, email, password });
else await api.signIn({ email, password });
}}
onSocial={(provider) => signInWith(provider)}
onForgotPassword={(email) => router.push(`/reset?email=${email}`)}
/>
);
}Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| defaultMode | "signin" \ | "signup" | "signin" | Mode shown first |
| mode | "signin" \ | "signup" | Controlled mode | |
| onModeChange | (mode) => void | Called when the bottom line switches modes | ||
| onSubmit | ({ mode, email, password, name? }) => void \ | Promise<void> | Called once the fields pass; a promise keeps the button spinning, a throw shows its message | |
| onSocial | (provider) => void \ | Promise<void> | Google, Apple or GitHub | |
| onForgotPassword | (email) => void | Called by the forgot password link | ||
| logo | ReactNode | a gray mark | Your logo at the top of the card | |
| className | string | Placement and width |
More forms
- File drop: A drag and drop uploader.
- Voice prompt: An AI composer you can talk to.
- Amount slider: Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out.
- AI prompt input: A composer for an AI assistant: a growing field with rolling placeholders, file chips, a model picker, web search, voice with a rippling particle ring, and a send that launches into a shimmering working state.