Components
Loading preview...
Sliding in placeholders and vanish effect of input on submit
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/placeholders-and-vanish-input"use client";
import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";
export function PlaceholdersAndVanishInputDemo() {
const placeholders = [
"What's the first rule of Fight Club?",
"Who is Tyler Durden?",
"Where is Andrew Laeddis Hiding?",
"Write a Javascript method to reverse a string",
"How to assemble your own PC?",
];
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value);
};
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log("submitted");
};
return (
<div className="h-[40rem] flex flex-col justify-center items-center px-4">
<h2 className="mb-10 sm:mb-20 text-xl text-center sm:text-5xl dark:text-white text-black">
Ask Aceternity UI Anything
</h2>
<PlaceholdersAndVanishInput
placeholders={placeholders}
onChange={handleChange}
onSubmit={onSubmit}
/>
</div>
);
}