Dialog

Buttons 1

About

Here is Dialog component

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

Code

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

Usage.tsx

"use client"

import { Heading } from "react-aria-components"

import { Button } from "@/components/ui/button-1"
import {
  Popover,
  PopoverDialog,
  PopoverTrigger,
} from "@/components/ui/popover-1"

export default function DialogPopover() {
  return (
    <PopoverTrigger>
      <Button variant="outline">Open popover</Button>
      <Popover className="w-80">
        <PopoverDialog className="space-y-2">
          <Heading
            className="text-lg font-semibold leading-none tracking-tight"
            slot="title"
          >
            Help
          </Heading>
          <p className="text-sm text-muted-foreground">
            For help accessing your account, please contact support.
          </p>
        </PopoverDialog>
      </Popover>
    </PopoverTrigger>
  )
}