Shadcn Editable for React Radix UI

Editable
├── EditableArea
├── EditableLabel
├── EditableInput
├── EditableInput
├── EditableEditTrigger
├── EditableSubmitTrigger
├── EditableCancelTrigger
└── EditableControl

import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Card className="w-full max-w-sm">
  <CardHeader
    description="Click in the field or edit button to start editing"
    title="Edit user"
  />
  <CardContent>
    <FieldGroup>
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Editable defaultValue="Vinicius Vicentini">
          <EditableArea>
            <EditableInput asChild>
              <Input className="w-full" />
            </EditableInput>
            <EditablePreview />
          </EditableArea>
          <EditableControl>
            <EditableCancelTrigger asChild>
              <Button size="icon-md" variant="outline">
                <XIcon />
              </Button>
            </EditableCancelTrigger>
            <EditableSubmitTrigger asChild>
              <Button size="icon-md" variant="outline">
                <CheckIcon />
              </Button>
            </EditableSubmitTrigger>
          </EditableControl>
        </Editable>
      </Field>
      <Field>
        <FieldLabel>Username</FieldLabel>
        <Editable defaultValue="@vinihvc">
          <EditableArea>
            <EditableInput asChild>
              <Input />
            </EditableInput>
            <EditablePreview />
          </EditableArea>
          <EditableControl>
            <EditableCancelTrigger asChild>
              <Button size="icon-md" variant="outline">
                <XIcon />
              </Button>
            </EditableCancelTrigger>
            <EditableSubmitTrigger asChild>
              <Button size="icon-md" variant="outline">
                <CheckIcon />
              </Button>
            </EditableSubmitTrigger>
          </EditableControl>
        </Editable>
      </Field>
    </FieldGroup>
  </CardContent>
</Card>