Inline EditProv1.0.0
Rename in place: the text becomes a field in exactly the same box, so nothing moves. Enter or leaving saves, Escape puts the old text back, validation says why in place, and a failed save rolls back.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-inline-editNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Save when leaving
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { InlineEdit } from "@/components/ui/lumen/controls/inline-edit";
export function ProjectTitle({ id, name }: { id: string; name: string }) {
return (
<h1 className="text-2xl font-semibold">
<InlineEdit
aria-label="Project name"
defaultValue={name}
maxLength={60}
validate={(v) => (v.length < 3 ? "Use at least 3 characters" : null)}
onValueChange={async (next) => {
const res = await fetch(`/api/projects/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: next }) });
// Throwing (or rejecting) puts the old name back and says the save failed.
if (!res.ok) throw new Error("Couldn't rename");
}}
/>
</h1>
);
}Props
aria-label–stringNames the field ("Project name"). Required: the text alone doesn't say what it is.
value / defaultValue–stringControlled or uncontrolled text.
onValueChange–(value: string) => void | Promise<unknown>Called with the saved text. Return a promise: a rejection restores the old text and announces it.
validate–(value: string) => string | nullReturn a reason to refuse a value; the field stays open and shows it.
placeholder"Untitled"stringShown when the text is empty.
allowEmptyfalsebooleanSave an empty value instead of keeping the old one.
Show all 10 propsShow fewer
saveOnBlurtruebooleanLeaving the field saves; false makes it revert.
editing / onEditingChange–boolean / (editing) => voidControlled edit mode, e.g. to open it from a Rename menu item.
maxLength / disabled–number / booleanAs on an input.
labels–Partial<{ edit, failed }>The words, for other languages.
Source
components/ui/lumen/controls/inline-edit.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
