Popover

The Popover component displays rich content in a portal, triggered by a button.

Preview

Usage

import { Popover, PopoverTrigger, PopoverContent } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Popover>
      
        <PopoverTrigger asChild>
          <button>Open Popover</button>
        </PopoverTrigger>
        
        <PopoverContent align='center' sideOffset={ 4 }>
          <div>Content goes here.</div>
        </PopoverContent>
        
      </Popover>
    </div>
  );
}

Props

Prop	Description	Required	Value
align	alignment of the content	optional	string (start/center/end), default: center
children	Trigger and PopoverContent components	required	components
className	custom styles	optional	SCSS or Tailwind
sideOffset	offset for the popover content	optional	integer, default: 4

Notes

• The Popover component uses PopoverPrimitive from @radix-ui/react-popover for the popover functionality.

• The align prop specifies the alignment of the popover content and defaults to 'center'.

• The sideOffset prop sets the offset for the popover content and defaults to 4.

• The className prop allows for custom styling to be applied.

• The children prop should include the PopoverTrigger and PopoverContent components.

• For more details, refer to the Shadcn Popover documentation.