All componentssmmdlg
Editable
Inline text that swaps between a hover preview and a focused input on click.
Q3 launch plan
Sizes
Q3 launch plan
Q3 launch plan
Q3 launch plan
Install
zsh — editable
1bunx stylexblocks add editableUsage — Ark UI
editable.tsx
1234567891011121314import { Editable } from "#components/ui/ark-ui/editable.tsx";
export function Example() { return ( // the size resolves once on Root; Preview and Input inherit it via // context and the machine swaps them on activation <Editable.Root defaultValue="Q3 launch plan" activationMode="click" size="md"> <Editable.Area> <Editable.Input /> <Editable.Preview /> </Editable.Area> </Editable.Root> );}