Peek Popover React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import PeekPopover from "./PeekPopover";

export default function Example() {
  return (
    <PeekPopover
      trigger={"Studio notes"}
      children={"Made to be explored.\n\nA small space for useful context, links, or a little more detail."}
      defaultOpen={true}
      label={"Studio notes"}
      color={"#d9b89c"}
      background={"#302720"}
      placement={"bottom"}
      disabled={false}
    />
  );
}

Using Peek Popover

Use trigger for the button label and children for useful supporting content. Reserve space around the trigger and choose top or bottom placement to suit the surrounding layout.

The panel closes on Escape, outside interaction or focus leaving the component. Escape returns focus to the trigger; open and onOpenChange allow application-controlled visibility.

Props

Name	Type	Required	Default	Description
trigger	ReactNode	No	undefined	Content of the disclosure button.
children	ReactNode	No	undefined	Popover content, including links and controls.
open	boolean	No	undefined	Controlled disclosure state.
defaultOpen	boolean	No	false	Initial uncontrolled state.
onOpenChange	function	No	undefined	Receives the requested open state.
label	string	No	"Details"	Accessible panel name and fallback trigger label.
color	string	No	"#d9b89c"	Text and border colour.
background	string	No	"#302720"	Surface colour.
placement	"top" \| "bottom"	No	"bottom"	Side of the trigger on which the panel appears.
disabled	boolean	No	false	Disable the trigger.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.