@radix-ui/react-popover

Basic Popover

This code demonstrates how to create a basic popover component. A button is used as the trigger, and when clicked, the popover content is displayed.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <PopoverContent>\n        This is the content of the popover.\n      </PopoverContent>\n    </Popover>\n  );\n}"}

Positioning

This example shows how to position the popover above the trigger button and align it in the center. The `side` and `align` props are used for positioning.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <PopoverContent side='top' align='center'>\n        This popover appears above the button.\n      </PopoverContent>\n    </Popover>\n  );\n}"}

Customization

This code snippet demonstrates how to customize the appearance of the popover content using CSS-in-JS (in this case, with Stitches). A custom styled component `StyledPopoverContent` is created and used instead of the default `PopoverContent`.

{"import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';\nimport { styled } from '@stitches/react';\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  backgroundColor: 'white',\n  borderRadius: '4px',\n  boxShadow: '0 2px 10px rgba(0,0,0,0.1)'\n});\n\nfunction Example() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button>Open</button>\n      </PopoverTrigger>\n      <StyledPopoverContent>\n        This popover has custom styles.\n      </StyledPopoverContent>\n    </Popover>\n  );\n}"}