import { NPopover, NButton, PopoverSize } from '@nayan-ui/react';

const Popover = () => {
  return (
    <NPopover size={PopoverSize.MD} trigger={<NButton>Show Popover</NButton>}>
      <div className="overflow-hidden p-3">
        <div className="text-sm font-medium text-foreground">Documentation</div>
        <div className="text-sm text-muted">Start integrating products and tools</div>
      </div>
    </NPopover>
  );
};

export default Popover;

Attributes

Name	Type	Default	Details
trigger	React.ReactNode	Optional	Trigger element for the popover.
children	React.ReactNode	Required	Content for the popover.
isOpen	boolean	Optional	Controlled open state.
onOpenChange	(isOpen: boolean) => void	Optional	Callback when open state changes.
placement	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Placement of the popover.
className	string	' '	You can customise by passing tailwind classes.

Popover

Demo

Demo Coming Soon

Usage

Attributes

Tags