Everything that shapes a section but is kept off the page itself, with a soft highlight travelling down the rows to show each one is a live control.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Editor55 } from "@/components/beste/component/editor55";
<Editor55
sectionLabel="Feature"
sectionId="#feature283"
rows={[{"label":"Padding","value":"96 px"},{"label":"Container","value":"7xl"},{"label":"Background","value":"Background"},{"label":"Card borders","value":"Per block"}]}
/>The import and the props worth knowing about, in one place.
import { Editor55 } from "@/components/beste/piece/editor55";
<Editor55
surface="card"
bordered={true}
inverted={false}
sectionLabel="Feature"
sectionId="#feature283"
rows={[
{
"label": "Padding",
"value": "96 px"
},
{
"label": "Container",
"value": "7xl"
},
{
"label": "Background",
"value": "Background"
},
{
"label": "Card borders",
"value": "Per block"
}
]}
dwellMs={900}
/>Images
Motion
Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.
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.
The fields that turn a page into a post, filling themselves in one row at a time and finishing on the tags, with the draft state held at the top throughout.
Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.