Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.
The import and the props worth knowing about, in one place.
import { Editor5 } from "@/components/beste/piece/editor5";
<Editor5
surface="card"
bordered={true}
inverted={false}
items={[
{
"label": "components",
"depth": 0,
"kind": "folderOpen"
},
{
"label": "beste",
"depth": 1,
"kind": "folderOpen"
},
{
"label": "button.tsx",
"depth": 2,
"kind": "file",
"active": true
},
{
"label": "card.tsx",
"depth": 2,
"kind": "file"
},
{
"label": "input.tsx",
"depth": 2,
"kind": "file"
},
{
"label": "ui",
"depth": 1,
"kind": "folder"
},
{
"label": "lib",
"depth": 0,
"kind": "folder"
}
]}
/>Path row with folder or file icons, chevron separators, and a bold final crumb.
Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.
export function greet(name: string) {return `Hello, ${name}!`;}// Ship it
Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.
Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.