shadcn.io is not affiliated with official shadcn/ui
Code Editor AI Block for React Aria
A read-only editor with a file tree, numbered lines with a movable marker, ghost suggestions you accept with Tab or dismiss with Escape, a derived status bar and a Problems list that jumps to its line.
Installation
Overview
Show inline suggestions the way an editor does, with this code editor for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Caretline, an editor with suggestions: the catalog's Tree View lists three files in two folders at the start, and the chosen file fills the main area as numbered lines with a marker on the current one. Arrow Up and Arrow Down, Home and End move the marker while focus is in the editor. Under some lines sits a ghost suggestion in muted text with Accept and Dismiss buttons and their Kbd hints; while the marker is on the line above it, Tab accepts it and Escape dismisses it. An accepted suggestion becomes real lines and the numbers follow. The status bar ("Ln 4, Col 1, 2 suggestions, 1 diagnostic") and the Problems list in a Collapsible are derived, a problem goes away when its suggestion is accepted, and pressing one moves the marker to its line. There is no primary button: the text is read-only. Guides draw the frame; everything moves with CSS only. For editors, notebooks and any surface that proposes text inline.
FAQ
What stays in the page, and how do I make it real?
All of it. The three files, the suggestions and the problems are typed in the file, and the accepted and dismissed lists live in state. Nothing is sent and no model runs. To wire it for real, ask your model for a completion where the marker rests and return it in the shape of a suggestion: the line it follows, the lines to add and a short note. To make the text editable, replace the line buttons with a code editor component and keep the ghost rows as widgets.
How does it work from the keyboard?
The editor is one tab stop. Arrow keys, Home and End move the marker and a polite line reads the new line. Tab and Escape answer a suggestion only when the marker is on the line above it; everywhere else Tab moves on to the suggestion's own Accept and Dismiss buttons, so nothing traps focus.
Where do the status bar and the problems come from?
They are computed from the open file and the choices made: suggestions are those not yet accepted or dismissed, and a problem lists the suggestion that fixes it, so accepting that suggestion removes the problem and the count drops. The marker position is the first number in the bar.
How does the file tree behave?
It is the catalog tree: arrow keys walk it, the side arrows open and close a folder, and Enter opens a file. Opening a file puts the marker on its first line. On a phone, choosing a file switches to the editor.