The Dialog

Component 7

About

Here is Dialog components

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

Code

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

Usage.tsx

'use client'

import { useState } from 'react'
import { CheckIcon } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { cn } from '@/lib/utils'

const teammates = [
  {
    id: 'sarah',
    name: 'Sarah Chen',
    role: 'Design lead',
    avatar:
      'https://cdn.21st.dev/assets/mirror/03/039131cd23196f79dda2cce8c0ed9e6a49832a0d73e33bbcae952cd528fe6b0f.jpg',
    initials: 'SC',
  },
  {
    id: 'marcus',
    name: 'Marcus Lee',
    role: 'Engineering',
    avatar:
      'https://cdn.21st.dev/assets/mirror/9f/9f697a8fcb60a85ac182a832a9dcc35bd8700da190fb8e393cb7129856a4ee5e.jpg',
    initials: 'ML',
  },
  {
    id: 'priya',
    name: 'Priya Patel',
    role: 'Product',
    avatar:
      'https://cdn.21st.dev/assets/mirror/32/32ca3771d3e6dc40c332111e84c7480e9f1d28ba7a1b47aa8e35657c8e9f5588.jpg',
    initials: 'PP',
  },
  {
    id: 'jordan',
    name: 'Jordan Kim',
    role: 'Marketing',
    avatar:
      'https://cdn.21st.dev/assets/mirror/7c/7c5efe89da6dc917b02d7e330fc859218876fe66004d600cd2742b0c5762a206.jpg',
    initials: 'JK',
  },
  {
    id: 'emma',
    name: 'Emma Wilson',
    role: 'Support',
    avatar:
      'https://cdn.21st.dev/assets/mirror/c2/c2f46411df86faeb804a710d6dd310aa5a3dd6e89431867ac2747dc2da6c36ed.jpg',
    initials: 'EW',
  },
]

export default function Dialog11() {
  const [selected, setSelected] = useState<string[]>(['sarah', 'marcus'])

  function toggle(id: string) {
    setSelected((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    )
  }

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Invite teammates</Button>
      </DialogTrigger>
      <DialogContent className="flex flex-col gap-0 overflow-hidden p-0 sm:max-w-md">
        <DialogHeader className="px-6 pt-6">
          <DialogTitle>Add to project</DialogTitle>
          <DialogDescription>
            Select teammates to invite. They will receive an email with edit
            access.
          </DialogDescription>
        </DialogHeader>
        <div className="max-h-[min(50vh,14rem)] overflow-y-auto px-3 pb-2">
          <ul className="flex flex-col gap-1 pt-1">
            {teammates.map((person) => {
              const isSelected = selected.includes(person.id)
              return (
                <li key={person.id}>
                  <button
                    type="button"
                    onClick={() => toggle(person.id)}
                    className={cn(
                      'hover:bg-muted/60 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
                      isSelected && 'bg-muted/40',
                    )}
                  >
                    <Avatar>
                      <AvatarImage src={person.avatar} alt="" />
                      <AvatarFallback>{person.initials}</AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-medium">
                        {person.name}
                      </p>
                      <p className="text-muted-foreground truncate text-xs">
                        {person.role}
                      </p>
                    </div>
                    <div
                      className={cn(
                        'flex size-4 shrink-0 items-center justify-center rounded-full border',
                        isSelected &&
                          'bg-primary border-primary text-primary-foreground',
                      )}
                    >
                      {isSelected ? (
                        <CheckIcon className="size-2.5 stroke-[3]" />
                      ) : null}
                    </div>
                  </button>
                </li>
              )
            })}
          </ul>
        </div>
        <DialogFooter className="border-t px-6 py-4">
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Invite {selected.length}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}