indevDialog

Forms 4

About

here is modern dialog by indev ui

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

Code

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

Usage.tsx

// demo.tsx
import Dialog, {
   DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
} from '@/components/ui/indev-dialog';

function DialogDemo() {
   return (
      <Dialog>
         <DialogTrigger asChild>
            <button className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground shadow-sm transition-colors hover:bg-primary/90">
               Edit Profile
            </button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
               <DialogTitle>Edit profile</DialogTitle>
               <DialogDescription>
                  Make changes to your profile here. Click save when you're done.
               </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
               <div className="grid grid-cols-4 items-center gap-4">
                  <label htmlFor="name" className="text-right text-sm font-medium">
                     Name
                  </label>
                  <input
                     id="name"
                     defaultValue="John Doe"
                     className="col-span-3 rounded-md border p-2 text-sm"
                  />
               </div>
               <div className="grid grid-cols-4 items-center gap-4">
                  <label htmlFor="username" className="text-right text-sm font-medium">
                     Username
                  </label>
                  <input
                     id="username"
                     defaultValue="@johndoe"
                     className="col-span-3 rounded-md border p-2 text-sm"
                  />
               </div>
            </div>
            <DialogFooter>
               <DialogClose asChild>
                  <button
                     type="button"
                     className="rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent"
                  >
                     Cancel
                  </button>
               </DialogClose>
               <button
                  type="submit"
                  className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
               >
                  Save changes
               </button>
            </DialogFooter>
         </DialogContent>
      </Dialog>
   );
}

export { DialogDemo as DemoOne };