Placeholders and Vanish Input
Input field with cycling placeholder text and a vanish animation on submit.
Preview
Placeholders and Vanish Input
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Search bars and AI prompt inputs.
Why this component matters
Cycling placeholders suggest possibilities, guiding users toward valid input patterns.
Usage guidance
Use for search or AI prompt inputs. Set 3-5 rotating placeholder examples. The vanish animation should trigger on submit. Pair with a clean, minimal surrounding layout.
Installation
bash
npx shadcn@latest add @aceternity/placeholders-and-vanish-inputUsage
example.tsxtsx
import { PlaceholdersandVanishInput } from "@/components/ui/placeholders-and-vanish-input";
export default function Example() {
return (
<PlaceholdersandVanishInput>
{/* Your content here */}
</PlaceholdersandVanishInput>
);
}Source
placeholders-and-vanish-input.tsx
components/ui/placeholders-and-vanish-input.tsx