Pro
Inline suggest
A text field that offers how your sentence might go on, in grey after the caret. Tab takes all of it, ⌘→ or Ctrl→ one word, Escape or typing something else sets it aside; typing what it says keeps the rest on offer.
pnpm dlx shadcn@latest add @caliper/inline-suggestWhen to use
Use it for
- Composing messages, replies, commit messages and prompts.
- Any long text where a likely ending saves real typing.
Skip it when
- Short fields such as names and search; use `Combobox`.
- Suggestions people must review carefully, like legal text.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Tab only when there is something
- With no suggestion Tab moves focus as usual, so the field never traps keyboard users.
- Said once
- The suggestion is announced politely with how to accept it, and only while the caret is at the end.
Styling
- A ghost layer
- A copy of the field with the same font and padding sits over it; the typed text there is invisible, so the suggestion lands exactly after the caret.
Installation
pnpm dlx shadcn@latest add @caliper/inline-suggest
Adds its 4 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 { InlineSuggest } from "@/components/ui/inline-suggest"
The worked example comes with Pro
The 46-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
InlineSuggest
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-describedby, aria-hidden and aria-live in step with state. Changes that matter are announced through a live region.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.