Inline edit

Rename in place: the text becomes a field without moving.

$npx shadcn@latest add @silicon-ui/inline-edit

inline editrenameclick to edit

Installation

$npx shadcn@latest add @silicon-ui/inline-edit

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/inline-edit/inline-edit.tsx
- components/silicon-ui/inline-edit/inline-edit.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { InlineEdit } from "@/components/silicon-ui/inline-edit/inline-edit";

Prop	Type	Default
`value*` The saved value. A new value from outside replaces the text while it is not being edited.	`string`	—
`onSave*` Persists the new value. Return a promise to show the saving state, and reject it to roll back.	`(next: string) => void \| Promise<unknown>`	—
`label*` Accessible name, for example “Project name”.	`string`	—
`validate` Returns a message when the draft cannot be saved.	`(next: string) => string \| null \| undefined`	—
`placeholder` Shown when the value is empty.	`string`	`""`
`multiline` Wraps onto several lines and grows in height. Enter still saves; Shift+Enter adds a line break.	`boolean`	`false`
`variant` `title` for names and headings, `body` for descriptions.	`"title" \| "body"`	`"title"`
`as` The element that holds the text, so a title can stay a heading.	`"span" \| "p" \| "h1" \| "h2" \| "h3"`	`"span"`
`className`	`string`	—