Popover

Popover is a simple dialog alert which can have details of the content. It can either have a confirm, cancel button or any action that can be triggered by the user's decision.

'use client';

import { Popover } from '@somaui/ui/popover';

Default

A simple Popover component.

'use client';

import { Popover } from '@somaui/ui/popover';
import { Title, Text } from '@somaui/ui/typography';
import { Button } from '@somaui/ui/button';

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" fontWeight="medium">
          Default popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}

Actionable

You can create actionable Popover using state.

'use client';

import React from 'react';
import { Popover } from '@somaui/ui/popover';
import { Title, Text } from '@somaui/ui/typography';
import { Button } from '@somaui/ui/button';
import { TrashIcon } from '@heroicons/react/24/solid';

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline" color="danger">
          <TrashIcon className="h-auto w-5" />
        </Button>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="w-56">
            <Title as="h6">Delete the task</Title>
            <Text>Are you sure you want to delete the task?</Text>
            <div className="mb-1 flex justify-end gap-3">
              <Button size="sm" variant="outline">
                No
              </Button>
              <Button size="sm" onClick={() => setOpen(false)}>
                Yes
              </Button>
            </div>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}

Controlled

You can control Popover state with isOpen and setIsOpen props:

'use client';

import React, { useState } from 'react';
import { Popover } from '@somaui/ui/popover';
import { Title, Text } from '@somaui/ui/typography';
import { Button } from '@somaui/ui/button';

export default function App() {
  const [isOpen, setIsOpen] = useState();
  return (
    <Popover isOpen={isOpen} setIsOpen={setIsOpen}>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" className="!mb-0 font-semibold">
          Controlled popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}

With Backdrop Overlay

You can render any thing using our Popover component.

'use client';

import React from 'react';
import { Popover } from '@somaui/ui/popover';
import { Button } from '@somaui/ui/button';
import { Avatar } from '@somaui/ui/avatar';

export default function App() {
  return (
    <Popover enableOverlay>
      <Popover.Trigger>
        <div className="w-12 cursor-pointer">
          <Avatar
            name="Jane Doe"
            src="https://randomuser.me/api/portraits/women/40.jpg"
            size="lg"
          />
        </div>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="font-geist">
            <div className="mb-3 flex items-center gap-3">
              <Avatar
                name="John Doe"
                src="https://randomuser.me/api/portraits/women/40.jpg"
                className="ring-blue ring-2 ring-offset-2"
                size="lg"
              />
              <div>
                <Text className="text-base font-semibold text-gray-900">
                  Fred Chaparro
                </Text>
                <Text className="text-sm text-gray-500">@fredchaparro</Text>
              </div>
            </div>
            <div className="max-w-[240px] text-sm">
              <Text className="text-gray-700">
                Full-stack Developer, love to work with @redq. 🎉{' '}
              </Text>
              <div className="mt-3 inline-flex gap-3 text-gray-500">
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    8
                  </Text>{' '}
                  Following
                </Text>
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    10.5k
                  </Text>{' '}
                  Followers
                </Text>
              </div>
            </div>
            <Button
              className="mt-4 w-full"
              size="sm"
              onClick={() => setOpen(false)}
            >
              Follow
            </Button>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}

API Reference

---

Popover Props

Here is the API documentation of the Popover component.

Props	Type	Description	Default
children	__	Use Popover.Trigger & Popover.Content as children	__
gap	number	Set the offset value from Popover.Trigger to Popover.Content	"8"
isOpen	boolean	Pass isOpen state to toggle the popover content	__
setIsOpen	Dispatch<SetStateAction<boolean>>	Pass setIsOpen to set open value	__
size	PopoverSizes	Supported popover sizes are:	"md"
placement	PopoverPlacements	Supported popover placements are:	"bottom"
shadow	PopoverShadow	Supported popover shadows are:	"md"
animation	PopoverAnimation	Supported popover animations are:	"zoomIn"
showArrow	boolean	Whether popover arrow should be shown or hidden	"true"
arrowClassName	string	Add custom classes to the arrow	__
enableOverlay	boolean	Whether popover backdrop overlay should be shown or hidden	"false"
overlayClassName	string	Add custom classes to the overlay	__

Popover Sizes

type PopoverSizes = 'sm' | 'md' | 'lg';

Popover Placements

type PopoverPlacements =
  | 'left'
  | 'right'
  | 'top'
  | 'bottom'
  | 'left-start'
  | 'left-end'
  | 'right-start'
  | 'right-end'
  | 'top-start'
  | 'top-end'
  | 'bottom-start'
  | 'bottom-end';

Popover Shadows

type PopoverShadow = 'sm' | 'md' | 'lg' | 'xl';

Popover Animations

type PopoverAnimation = 'fadeIn' | 'zoomIn' | 'slideIn';