Ghost Autocomplete, animated React component

Inline AI autocomplete for a text box, where a grey suggestion fades in after your cursor when you pause. Tab inks it in from left to right, typing the same words makes it follow you, and typing something else drops the ghost letters away.

Pro
AI Components
Spring

Gives one quiet tick when Tab accepts a suggestion and stays silent while you type; autoplay makes the same tick once the visitor has used the page. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

To: [email protected]Tab to accept

Pause typing for a suggestion

Props

Prop	Type	Default	What it does
rules	GhostRule[]	GHOST_AUTOCOMPLETE_RULES	Pairs of [pattern, suggestion]. When the text ends with the pattern (use a $-anchored regex), the suggestion is offered after a short pause.
defaultValue	string	GHOST_AUTOCOMPLETE_START	What the box starts with.
to	string	"[email protected]"	The recipient line above the box.
onAccept	(suggestion: string) => void	undefined	Called with the suggestion text when Tab accepts it.
width	number	480	Width of the card in px. It never grows past its container.
autoplay	boolean	false	Types a short script by itself, accepting one suggestion, following another and dropping a third, until someone touches the box. The script is written for the default rules and text. Only runs while on screen and never under reduced motion.
className	string	""	Extra classes for the card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/ghost-autocomplete
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
ghost-autocomplete/
ghost-autocomplete.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { GhostAutocomplete } from "@/components/ghost-autocomplete";

export default function Page() {
  return (
    <main>
      <GhostAutocomplete />
    </main>
  );
}

Ghost Autocomplete questions

Does it make sound, and how do I turn it off?

Gives one quiet tick when Tab accepts a suggestion and stays silent while you type; autoplay makes the same tick once the visitor has used the page. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
NewSound
Streaming Answer
Pro
NewSound
Diff Review
Pro
NewSound
Agent Run
Pro
New
Travelling Tooltip