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.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Editor54 } from "@/components/beste/component/editor54";
<Editor54
fields={[{"label":"Author","value":"Nina Simone"},{"label":"Publish Date","value":"12 May 2026"},{"label":"Read Time","value":"5 min read"}]}
tags={["retail","case study"]}
/>The import and the props worth knowing about, in one place.
import { Editor54 } from "@/components/beste/piece/editor54";
<Editor54
surface="card"
bordered={true}
inverted={false}
title="Post Settings"
status="Draft"
fields={[
{
"label": "Author",
"value": "Nina Simone"
},
{
"label": "Publish Date",
"value": "12 May 2026"
},
{
"label": "Read Time",
"value": "5 min read"
}
]}
tags={[
"retail",
"case study"
]}
stepMs={380}
/>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.
One image's own motion settings, with the thumbnail beside them performing what the rows describe: blurring into place, then drifting as though the page were scrolling past it.
Images
Motion
Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.
Start by adding your first block.
Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.