Pieces/Editor(56)

Editor pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

AI Suggestion
const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

const msg = greet("Beste");
function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.

index.tsx
button.tsx
card.tsx
theme.css

Editor Tab Bar

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

File Tree

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

src
components
beste
button.tsx

Path Breadcrumb

Path row with folder or file icons, chevron separators, and a bold final crumb.

user.
  • idstring
  • namestring
  • emailstring
  • isAdminboolean
  • save(): Promise<void>

IntelliSense

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

Markdown version