npm install @radix-ui/react-primitive @radix-ui/react-dialog @radix-ui/react-dropdown-menu

import * as Dialog from '@radix-ui/react-dialog'

export function AlertDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Delete</button>
      </Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-8 rounded-lg shadow-lg">
          <Dialog.Title>Confirm deletion</Dialog.Title>
          <Dialog.Description>
            This action cannot be undone.
          </Dialog.Description>

          <div className="flex gap-4 mt-8">
            <button className="bg-red-600 text-white px-4 py-2 rounded">
              Delete
            </button>
            <Dialog.Close asChild>
              <button className="border px-4 py-2 rounded">
                Cancel
              </button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

export function UserMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button>Menu</button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Content className="min-w-[200px] bg-white shadow-lg rounded-lg p-1">
        <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
          Profile
        </DropdownMenu.Item>
        <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
          Settings
        </DropdownMenu.Item>
        <DropdownMenu.Separator className="my-1 h-px bg-gray-200" />
        <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600">
          Sign Out
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

import * as Tabs from '@radix-ui/react-tabs'

export function TabsExample() {
  return (
    <Tabs.Root defaultValue="tab1">
      <Tabs.List className="flex border-b">
        <Tabs.Trigger value="tab1" className="px-4 py-2 border-b-2 border-transparent hover:border-blue-500 data-[state=active]:border-blue-600">
          Tab 1
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2" className="px-4 py-2 border-b-2 border-transparent hover:border-blue-500 data-[state=active]:border-blue-600">
          Tab 2
        </Tabs.Trigger>
      </Tabs.List>

      <Tabs.Content value="tab1">Content 1</Tabs.Content>
      <Tabs.Content value="tab2">Content 2</Tabs.Content>
    </Tabs.Root>
  )
}

import * as Popover from '@radix-ui/react-popover'

export function PopoverExample() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button>Open popover</button>
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content className="bg-white shadow-lg rounded-lg p-4 w-64">
          <div className="space-y-2">
            <h3 className="font-semibold">Popover Content</h3>
            <p className="text-sm text-gray-600">
              This is a popover dialog.
            </p>
          </div>
          <Popover.Close asChild>
            <button className="mt-4 text-blue-600">Close</button>
          </Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  )
}