Inline Rewrite

Drag a dial to rewrite a paragraph in place, with shared words gliding into position.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/inline-rewrite

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Drag a dial to rewrite a paragraph in place, with shared words gliding into position.

Uses local demo data; no AI service or network requests.

import { InlineRewrite } from "@/components/inline-rewrite";

<InlineRewrite label="Length" description="Adjust how much detail the paragraph includes." defaultValue={1} versions={[{ label: "Shorter", text: "Fresh beans, delivered." }, { label: "Original", text: "Fresh beans from small roasters, delivered every two weeks." }]} />

Props

Prop	Type	Description
`versions`	`RewriteVersion[]`	Required. Available rewrite versions, including their labels and text.
`value`	`number`	Optional. The chosen version's index.
`defaultValue`	`number`	Optional. Initial selection when uncontrolled.
`onValueChange`	`(index: number) => void`	Optional. Called when the selection changes.
`originalIndex`	`number`	Optional. The version the counts compare against. Defaults to the one chosen first.
`onRewrite`	`(request: RewriteRequest) => Promise<string>`	Optional. Asynchronous rewrite handler. Resolve with the replacement text.
`label`	`string`	Optional. Visible heading and accessible name for the slider, e.g. "Tone".
`description`	`string`	Optional. Help text, shown beside the heading in an info tooltip.
`highlight`	`boolean`	Optional. Let new words glow for a moment after each rewrite.