Overlays

Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Basic

Popovers are small overlays that display additional information about an element when the user clicks on it.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Popover comes packed with a variety of components to make it stand out.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Dialog

Dialog's a slick component used in other parts of your project that need dialog, like modal, sheet, color picker, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Controlled

You can control the popover programmatically.

Overlay Arrow

The default has an arrow, but you can disable it by passing the showArrow prop.

Placement

You can change the placement of the popover by passing the placement prop.

The list above shows the primary directions, but you can also use specific placements like bottom left or top right. Here are all the available placement options:

Primary DirectionPlacement
bottombottom, bottom left, bottom right, bottom start, bottom end
toptop, top left, top right, top start, top end
leftleft, left top, left bottom
startstart, start top, start bottom
rightright, right top, right bottom
endend, end top, end bottom

Custom Close

The popover can be customized to include a custom close button.

Popover Trigger

All the examples above use <Button/> as the trigger, but what if you wanna switch it up, like using <Avatar/> instead? No sweat, just roll with PopoverTrigger like this:

TextareaMeter