Saaj UI

Popover

Display a popover or a component that looks like a popover.

Preview

Installation

npx saaj add Popover

Usage

MyPopover.tsx
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/Popover';
import { Button, ButtonIcon } from '@/components/ui/Button';
import { Text } from '@/components/ui/Text';
 
export function MyDropdownMenu() {
  return (
    <Popover>
      <PopoverTrigger as={Button}>
        <ButtonText>Open Popover</ButtonText>
      </PopoverTrigger>
      <PopoverContent maxWidth={260}>
        <PopoverArrow />
        <Text variant="bodySm">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae
          cupiditate sed quia neque earum eligendi atque deserunt deleniti minus
          laborum?
        </Text>
      </PopoverContent>
    </Popover>
  );
}

On this page