Popover

A Popover is a small overlay that opens on user interaction, providing contextual information or options without navigating away from the current page.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import Popover from '@start-base/start-ui/Popover';

Usages

Popover With Left Placement

Popover With Left Start Placement

Popover With Left End Placement

Popover With Right Placement

Popover With Right Start Placement

Popover With Right End Placement

Popover With Top Placement

Popover With Top Start Placement

Popover With Top End Placement

Popover With Bottom Placement

Popover With Bottom Start Placement

Popover With Bottom End Placement

API

Name	Type	Default	Variants	Description
popper	`node`			Element that triggers popover
placement	`string`	`bottom`	`top` `bottom` `left` `right` `top-start` `top-end` `bottom-start` `bottom-end` `left-start` `left-end` `right-start` `right-end`	Placement of the popover
isOpen	`bool`	`false`		Controls the visibility
onClose	`func`			Function to close the popover
children	`node`			Content of the popover

List Progress