Edit Profile Dialouge

Forms

About

A dialog to edit profile

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Edit Profile Dialouge to your project and fits it to your theme.

Code

How Edit Profile Dialouge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { EditProfile } from "@/components/ui/edit-profile-dialouge"

function App(){
    return (
        <div className="w-[400px] mx-auto space-y-3 my-4">
            <Card className="relative">
                    <EditProfile profile={profile} setProfile={setProfile}/>
                    <CardHeader>
                        <Avatar className="size-16">
                            <AvatarImage src={profile.img} />
                            <AvatarFallback>👨‍💻</AvatarFallback>
                        </Avatar>
                        <CardTitle className="tracking-wide">
                            {profile.fullName}
                        </CardTitle>
                        <CardDescription>
                            @{profile.id}
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="line-clamp-4">
                        {profile.summary}
                    </CardContent>
                </Card>
        </div>
    )
}