Pro
Vanish input
A one-line prompt that shows what to ask and lets go of what was sent. While empty it cycles through suggestions, each rising into place; on send the words break into grains that drift off and the field is ready again.
pnpm dlx shadcn@latest add @caliper/vanish-inputWhen to use
Use it for
- The ask box of an assistant, search or command surface on a landing or empty state.
- Moments where sending should feel acknowledged without a toast.
Skip it when
- Forms where the value must stay visible after submit.
- Multi-line prompts with attachments; use the prompt input.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Cycling stops when you engage
- Suggestions change only while the field is empty and unfocused, never under reduced motion.
- Grains from the real glyphs
- The text is drawn with the field's own font to a canvas and sampled, so the grains line up with the words exactly.
Usage
- One name
- The label never changes, so a screen reader hears one name; the first suggestion is its description and sent text is announced.
Installation
pnpm dlx shadcn@latest add @caliper/vanish-input
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { VanishInput } from "@/components/ui/vanish-input"
The worked example comes with Pro
The 33-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
VanishInput
component
Accessibility
It exposes status semantics, with aria-label and aria-describedby kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.