Panel listing editor actions with their kbd shortcut combinations on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Editor37 } from "@/components/beste/piece/editor37";
<Editor37
title="Keybindings"
bindings={[
{
"action": "Command palette",
"keys": [
"⌘",
"K"
]
},
{
"action": "Quick open",
"keys": [
"⌘",
"P"
]
},
{
"action": "Toggle terminal",
"keys": [
"⌃",
"`"
]
},
{
"action": "Format document",
"keys": [
"⌥",
"⇧",
"F"
]
}
]}
/>Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.
Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.
Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.
function greet(name: string)Action row above a function signature showing references, implementations, and inline commands.
No tutorials needed.
If you can order food online, you can build a website with Beste.
Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.
const message = `Hello`;const longer = `Shipping the biggest onboarding upgrade yet`;const wrapped = items.map((i) => i.name).join(', ') + '!'
Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.