Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.
The import and the props worth knowing about, in one place.
import { Editor2 } from "@/components/beste/piece/editor2";
<Editor2
surface="card"
bordered={true}
inverted={false}
prefix="user."
items={[
{
"label": "id",
"kind": "variable",
"detail": "string"
},
{
"label": "name",
"kind": "variable",
"detail": "string",
"active": true
},
{
"label": "email",
"kind": "variable",
"detail": "string"
},
{
"label": "isAdmin",
"kind": "variable",
"detail": "boolean"
},
{
"label": "save",
"kind": "function",
"detail": "(): Promise<void>"
}
]}
/>Inline :shortcode typing with an autocomplete dropdown showing emoji previews.
const name = 'Ayşe';const role = 'design';const team = 'core';
Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.
Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.
const greet = (name: string) => `Hello, ${name}!`;AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.