Popover

popover-1779394643403.tsx

'use client'
import { useState, useRef } from 'react'

export default function Popover() {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)
  return (
    <div style={{ position:'relative', display:'inline-block' }}>
      <button ref={ref} onClick={()=>setOpen(!open)} style={{
        background:'#6d28d9', color:'#fff', border:'none', borderRadius:'10px',
        padding:'10px 20px', cursor:'pointer', fontWeight:600, fontSize:'14px',
      }}>
        User Profile ▾
      </button>
      {open && (
        <>
          <div onClick={()=>setOpen(false)} style={{ position:'fixed', inset:0, zIndex:50 }}/>
          <div style={{
            position:'absolute', top:'calc(100%+12px)', left:'50%', transform:'translateX(-50%)',
            background:'#fff', borderRadius:'16px', padding:'20px',
            boxShadow:'0 12px 40px rgba(0,0,0,0.15)', zIndex:100, width:'240px',
            border:'1px solid #f1f5f9', animation:'popIn 0.2s ease',
          }}>
            <style>{'@keyframes popIn{from{opacity:0;transform:translateX(-50%) scale(0.95)}to{opacity:1;transform:translateX(-50%) scale(1)}}'}</style>
            <div style={{ position:'absolute', top:'-6px', left:'50%', transform:'translateX(-50%)', width:'12px', height:'12px', background:'#fff', border:'1px solid #f1f5f9', borderBottom:'none', borderRight:'none', transform:'translateX(-50%) rotate(45deg)' }}/>
            <div style={{ display:'flex', alignItems:'center', gap:'12px', marginBottom:'14px' }}>
              <div style={{ width:'44px', height:'44px', borderRadius:'50%', background:'linear-gradient(135deg,#6d28d9,#2563eb)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'20px', flexShrink:0 }}>👩‍💻</div>
              <div>
                <div style={{ fontWeight:700, color:'#1e293b', fontSize:'14px' }}>Alice Martin</div>
                <div style={{ fontSize:'12px', color:'#94a3b8' }}>alice@empire-ui.com</div>
              </div>
            </div>
            {['Profile','Settings','Billing','Help'].map(item=>(
              <div key={item} style={{ padding:'9px 10px', borderRadius:'8px', fontSize:'13px', color:'#374151', cursor:'pointer', transition:'background 0.1s' }}
                onMouseEnter={e=>e.currentTarget.style.background='#f8fafc'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              >{item}</div>
            ))}
            <div style={{ borderTop:'1px solid #f1f5f9', marginTop:'8px', paddingTop:'8px' }}>
              <div style={{ padding:'9px 10px', borderRadius:'8px', fontSize:'13px', color:'#ef4444', cursor:'pointer' }}
                onMouseEnter={e=>e.currentTarget.style.background='#fff5f5'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              >Sign Out</div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Configurable popover with rich content, arrow and positioning

More from Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays

'use client';

import { useState, useEffect } from 'react';

interface Command {
  id: number;
  title: string;
  description: string;
}

const commands: Command[] = [
  { id: 1, title: 'New File', description: 'Create a new file' },
  { id: 2, title

CommandPalette

Overlays

'use client'
import { useState, useEffect } from 'react'

const notifications = [
  { id: 1, type: '🎉', title: 'New component published', time: '2m ago', read: false },
  { id: 2, type: '💰', title: 'Pro subscription active', time: '1h ago', read: f

DrawerPanel

Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays