Shadow Panda
Shadow Panda
Component
Popover

Popover

Displays rich content in a portal, triggered by a button.

shadcn/uiRadix UIAPI Reference

Installation

Install the following dependencies

npm i @radix-ui/react-popover

Copy and paste the following code into your project

components/ui/popover/index.tsx
'use client'
 
import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { popover } from '@shadow-panda/styled-system/recipes'
 
const { withProvider, withContext } = createStyleContext(popover)
 
const Portal = withContext(styled(PopoverPrimitive.Portal), 'portal')
 
const Content = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ align = 'center', sideOffset = 4, ...props }, ref) => (
  <Portal>
    <PopoverPrimitive.Content ref={ref} align={align} sideOffset={sideOffset} {...props} />
  </Portal>
))
Content.displayName = PopoverPrimitive.Content.displayName
 
export const Popover = withProvider(styled(PopoverPrimitive.Root), 'root')
export const PopoverTrigger = withContext(styled(PopoverPrimitive.Trigger), 'trigger')
export const PopoverContent = withContext(styled(Content), 'content')

Update the import paths to match your project setup

Usage

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>
Navigation MenuProgress