Command Palette

Search for a command to run...

Popover

shadcn/ui

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

Popover

import { Popover, PopoverContent, PopoverTrigger } from "@/components/optics/popover";import { Button } from "@/components/optics/button";<Popover>  <PopoverTrigger render={<Button variant="raised">Open Popover</Button>} />  <PopoverContent>    <div className="space-y-2">      <h4 className="font-medium leading-none">        Dimensions      </h4>      <p className="text-sm text-muted-foreground">        Set the dimensions for the layer.      </p>    </div>  </PopoverContent></Popover>

Installation

pnpm dlx shadcn@latest add @optics/popover

Props

<Popover />
Name
Type
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement

<PopoverContent />
Name
Type
positionerClassName
any
align
string(default: center)
alignOffset
number(default: 0)
side
string(default: bottom)
sideOffset
number(default: 4)
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement
<PopoverDescription />
Name
Type
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement
<PopoverHeader />
Name
Type
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement
<PopoverTitle />
Name
Type
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement
<PopoverTrigger />
Name
Type
defaultOpen
boolean
open
boolean
onOpenChange
(...args) => void
onOpenChangeComplete
((open: boolean) => void)
modal
boolean | "trap-focus"
triggerId
string
defaultTriggerId
string
nativeButton
boolean
render
React.ReactElement
payload
object
openOnHover
boolean
delay
number
closeDelay
number
keepMounted
boolean
container
HTMLElement | RefObject<HTMLElement>
anchor
(...args) => Element
positionMethod
"absolute" | "fixed"
sideOffset
number
alignOffset
number
sticky
boolean
arrowPadding
number
disableAnchorTracking
boolean
initialFocus
boolean | HTMLElement
finalFocus
boolean | HTMLElement