Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Inline Suggestions Prompt AI Block for Svelte

A reply box that continues your line in grey from twelve typed openers; Tab accepts, Escape dismisses, chips swap the ending, and a counter tallies what you accepted.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help people finish a sentence faster, with this inline-suggestions prompt for Svelte with Ark UI. A Textarea sits transparent over a mirror layer that repeats what you typed and adds the rest of the sentence in grey, so both wrap the same way and follow the field's direction. Twelve typed openers are known, "Thanks for your note about" and "Please let me know if" among them, each with three endings: the grey text continues the first that still fits what you typed, and the endings that fit appear as chips under the field to swap it. Tab accepts the grey text, Escape dismisses it, and an Accept button with a Kbd hint does the same for a touch screen. A counter says "Accepted 1 of 3 suggestions", a one-line band says what would be sent (the grey text never is), and the Shine Button sends, the only colored control. It's built from Textarea, Button, Kbd, Shine Button and Guides, with a CSS entrance only. For mail, support replies and any writing box with completions.

FAQ

Where do the suggestions come from, and what stays local?

From a typed table, ENTRIES, not from a model. A line that starts no known opener gets no grey text, and the page says so under the field. Nothing is sent: the Send button only builds the request line. To make it real, call your completion API as the visitor pauses, put its answer in the same grey layer, and keep Tab, Escape and the Accept button as they are.

How does the grey text line up with the typing?

Two boxes share one grid cell with the same padding, font size and line height: a mirror that draws your text invisibly and the suggestion in grey, and the real field above it with a clear background. The mirror decides the height, so a long suggestion wraps in the field exactly as it will once accepted. The field is limited to 280 characters so the two never drift apart by scrolling.

Does Tab trap the keyboard?

Only while a suggestion is showing: Tab accepts it. Press Escape to dismiss the grey text and the next Tab moves on as usual, or use Shift+Tab to leave backwards. A hint tied to the field says so for a screen reader, and the status line announces "Suggestion ready: press Tab to accept" when one appears. The Accept button is always there for people who prefer it.

How is the counter worked out?

Each time a suggestion appears for a new opener it counts as shown, and each Tab or Accept counts as accepted, so the line reads "Accepted 2 of 5 suggestions". The numbers are derived from what you did in this page and start fresh on reload.

Does it work in a right-to-left language?

The mirror and the field both take the direction of the text, so the grey continuation lands at the end of an Arabic or Hebrew line. The typed openers here are English, so the table is the part to translate.

How does it look on a phone?

There is no Tab key on a phone, so the Accept button is the way in; its key hint is hidden. The endings are chips that wrap under the field, and the field keeps its height whether or not a suggestion is showing.

All 100 ai blocks