Post Settings Drawer

Post SettingsDraft
Author
Publish Date
Read Time
About this piece

Post Settings Drawer

The fields that turn a page into a post, filling themselves in one row at a time, with the draft state held at the top throughout.

Usage

The import and the props worth knowing about, in one place.

import { Editor54 } from "@/components/beste/piece/editor54";

<Editor54
  surface="card"
  bordered={false}
  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"
    }
  ]}
  stepMs={380}
/>

More Editor pieces

View all Editor
Feature
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block
hero-photograph.jpg
EntranceBlur in
Scroll effectParallax
StrengthStrong
Appearance

Images

Image entrance
Scroll effect

Motion

Section animation
Animation speed
Your page looks empty

Start by adding your first block.

const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'
Portrait Hero

Tall photograph beside a heading, a short paragraph and a checked benefit list.