# Dialog with Email and Password Fields

> A dialog with email and password fields block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/dialog-08).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/dialog-08
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/dialog-08-light-c518a5915a9ea8d0.png
- Registry item: https://blocks.so/r/dialog-08.json
- Categories: dialogs
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/dialog-08.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `avatar`, `badge`, `button`, `dialog`, `input`

## Files

### `content/components/dialogs/dialog-08.tsx`

```tsx
'use client';

import { UserPlus } from 'lucide-react';
import { useState } from 'react';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';

const members = [
  {
    name: 'Ephraim Duncan',
    email: 'ephraim@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-01.png',
    initials: 'ED',
    status: 'member',
  },
  {
    name: 'Lucas Smith',
    email: 'lucas@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-03.png',
    initials: 'LS',
    status: 'member',
  },
  {
    name: 'Timur Ercan',
    email: 'timur@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-02.jpg',
    initials: 'TE',
    status: 'member',
  },
  {
    name: 'Catalin Pit',
    email: 'catalin@documenso.com',
    avatarUrl: 'https://blocks.so/avatar-04.jpg',
    initials: 'CP',
    status: 'member',
  },
];

export default function Dialog07() {
  const [open, setOpen] = useState(true);

  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>
        Invite members
      </DialogTrigger>
      <DialogContent className="sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-balance font-semibold text-foreground">
            Invite members
          </DialogTitle>
          <DialogDescription className="text-pretty text-muted-foreground text-sm leading-6">
            Add new team members to your workspace. Please consider your
            organization&apos;s policies when adding external people.
          </DialogDescription>
        </DialogHeader>
        <form>
          <div className="flex w-full items-center space-x-2">
            <div className="relative flex-1">
              <UserPlus className="-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground" />
              <Input
                className="h-10 pl-9"
                id="inviteEmail"
                placeholder="Add email..."
                type="email"
              />
            </div>
            <Button className="h-10" type="submit">
              Invite
            </Button>
          </div>
        </form>
        <h4 className="mt-4 text-balance font-medium text-foreground text-sm">
          People with existing access
        </h4>
        <ul className="divide-y">
          {members.map((member) => (
            <li
              className="flex items-center justify-between py-2.5"
              key={member.name}
            >
              <div className="flex items-center space-x-3">
                <Avatar className="h-9 w-9">
                  <AvatarImage alt={member.name} src={member.avatarUrl} />
                  <AvatarFallback>{member.initials}</AvatarFallback>
                </Avatar>
                <span className="font-medium text-foreground">
                  {member.name}
                </span>
              </div>
              <Badge
                className="bg-background font-medium text-xs"
                variant="outline"
              >
                {member.status}
              </Badge>
            </li>
          ))}
        </ul>
      </DialogContent>
    </Dialog>
  );
}
```