Yami

Editable

Inline editable text with keyboard support.

Click to edit

Installation

Add the editable component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/editable.json

Usage

import {
  Editable,
  EditableArea,
  EditableInput,
  EditablePreview,
} from "@/components/ui/editable"

<Editable defaultValue="Click to edit">
  <EditableArea>
    <EditablePreview />
    <EditableInput />
  </EditableArea>
</Editable>

Examples

Default

Click to edit

Code

import {
  Editable,
  EditableArea,
  EditableInput,
  EditablePreview,
} from "@/components/ui/editable"

<Editable defaultValue="Click to edit">
  <EditableArea>
    <EditablePreview />
    <EditableInput />
  </EditableArea>
</Editable>