Wi-Fi

Bluetooth

Mute

) } `,__src__:"src/registry/default/example/popover/popover-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/switch"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverDemo"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Settings"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-col gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" defaultSelected"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Wi-Fi"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" defaultSelected"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Bluetooth"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Mute"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" import { Switch } from "@/components/ui/switch" export function PopoverDemo() { return (

Wi-Fi

Bluetooth

Mute

) } `,__src__:"src/registry/new-york/example/popover/popover-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/switch"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverDemo"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Settings"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-col gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" defaultSelected"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Wi-Fi"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" defaultSelected"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Bluetooth"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"indicator"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" /> Mute"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(E,{defaultValue:"cli",children:[(0,n.jsxs)(F,{children:[(0,n.jsx)(d,{value:"cli",children:"CLI"}),(0,n.jsx)(d,{value:"manual",children:"Copy & Paste"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsxs)(p,{children:[(0,n.jsx)(r,{value:"npm",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`npx shadcn@latest add https://backchanel.com/[[STYLE]]/popover `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/popover"})]})})})})}),(0,n.jsx)(r,{value:"pnpm",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`pnpm dlx shadcn@latest add https://backchanel.com/[[STYLE]]/popover `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"pnpm"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" dlx"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/popover"})]})})})})}),(0,n.jsx)(r,{value:"bun",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`bunx --bun shadcn@latest add https://backchanel.com/[[STYLE]]/popover `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"bunx"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" --bun"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/popover"})]})})})})}),(0,n.jsx)(r,{value:"yarn",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`npx shadcn@latest add https://backchanel.com/[[STYLE]]/popover `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/popover"})]})})})})})]})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{children:"Copy and paste the following code into your project: popover.tsx"}),(0,n.jsxs)(s,{name:"popover",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/ui/popover.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import * as React from "react" import { Dialog as AriaDialog, DialogProps as AriaDialogProps, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover, PopoverProps as AriaPopoverProps, composeRenderProps, } from "react-aria-components" import { cn } from "@/lib/utils" const PopoverTrigger = AriaDialogTrigger const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => ( cn( "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none", /* Entering */ "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95", /* Exiting */ "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95", /* Placement */ "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2", className ) )} {...props} /> ) function PopoverDialog({ className, ...props }: AriaDialogProps) { return ( ) } export { Popover, PopoverTrigger, PopoverDialog } `,__src__:"src/registry/default/ui/popover.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Dialog "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialog,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" DialogProps "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogProps,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" DialogTrigger "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogTrigger,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaPopover,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverProps "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaPopoverProps,"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" composeRenderProps,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogTrigger"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" Popover"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" 4"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:" AriaPopoverProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AriaPopover"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"composeRenderProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(className, ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" cn"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Entering */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Exiting */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Placement */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:")"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:" AriaDialogProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AriaDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"p-4 outline outline-0"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Popover, PopoverTrigger, PopoverDialog }"})]})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/ui/popover.tsx",__style__:"new-york","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import * as React from "react" import { Dialog as AriaDialog, DialogProps as AriaDialogProps, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover, PopoverProps as AriaPopoverProps, composeRenderProps, } from "react-aria-components" import { cn } from "@/lib/utils" const PopoverTrigger = AriaDialogTrigger const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => ( cn( "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none", /* Entering */ "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95", /* Exiting */ "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95", /* Placement */ "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2", className ) )} {...props} /> ) function PopoverDialog({ className, ...props }: AriaDialogProps) { return ( ) } export { Popover, PopoverTrigger, PopoverDialog } `,__src__:"src/registry/new-york/ui/popover.tsx",__style__:"new-york",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Dialog "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialog,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" DialogProps "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogProps,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" DialogTrigger "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogTrigger,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaPopover,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverProps "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaPopoverProps,"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" composeRenderProps,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AriaDialogTrigger"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" Popover"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" 4"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:" AriaPopoverProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AriaPopover"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"composeRenderProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(className, ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" cn"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Entering */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Exiting */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:" /* Placement */"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:")"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:" AriaDialogProps"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AriaDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"p-4 outline outline-0"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Popover, PopoverTrigger, PopoverDialog }"})]})]})})})]}),(0,n.jsx)(i,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"examples",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,n.jsxs)(l.h3,{id:"basic",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#basic",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Basic"]}),` `,(0,n.jsxs)(o,{name:"popover-demo",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/example/popover/popover-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" import { Switch } from "@/components/ui/switch" export function PopoverDemo() { return (

Wi-Fi

Bluetooth

Mute

Wi-Fi

Bluetooth

Mute

In left-to-right, this is on the left. In right-to-left, this is on the right. This popover is above the button. This popover is below the button. In left-to-right, this is on the right. In right-to-left, this is on the left.

) } `,__src__:"src/registry/default/example/popover/popover-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverPosition"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B05\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" In left-to-right, this is on the left. In right-to-left, this is on"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" the right."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B06\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This popover is above the button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B07\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This popover is below the button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u27A1\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" In left-to-right, this is on the right. In right-to-left, this is on"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" the left."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-position.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverPosition() { return (

) } `,__src__:"src/registry/new-york/example/popover/popover-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverPosition"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B05\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" In left-to-right, this is on the left. In right-to-left, this is on"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" the right."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B06\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This popover is above the button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u2B07\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This popover is below the button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"icon"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" \u27A1\uFE0F"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" In left-to-right, this is on the right. In right-to-left, this is on"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" the left."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h4,{id:"offset-and-cross-offset",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#offset-and-cross-offset",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Offset and Cross offset"]}),` `,(0,n.jsxs)(o,{name:"popover-offset",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/example/popover/popover-offset.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverOffset() { return ( Offset by an additional 50px. ) } `,__src__:"src/registry/default/example/popover/popover-offset.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverOffset"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset by an additional 50px."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-offset.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverOffset() { return ( Offset by an additional 50px. ) } `,__src__:"src/registry/new-york/example/popover/popover-offset.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverOffset"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset by an additional 50px."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(o,{name:"popover-cross-offset",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/example/popover/popover-cross-offset.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverCrossOffset() { return ( Offset by an additional 100px. ) } `,__src__:"src/registry/default/example/popover/popover-cross-offset.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverCrossOffset"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Cross offset"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" crossOffset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset by an additional 100px."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-cross-offset.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverCrossOffset() { return ( Offset by an additional 100px. ) } `,__src__:"src/registry/new-york/example/popover/popover-cross-offset.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverCrossOffset"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Cross offset"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" crossOffset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Offset by an additional 100px."})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h4,{id:"flipping",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#flipping",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Flipping"]}),` `,(0,n.jsxs)(o,{name:"popover-flipping",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/example/popover/popover-flipping.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverFlipping() { return (

This is a popover that will flip if it can't fully render below the button. This is a popover that won't flip if it can't fully render below the button.

) } `,__src__:"src/registry/default/example/popover/popover-flipping.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverFlipping"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Default"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover that will flip if it can't fully render below the"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">shouldFlip=false"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" shouldFlip"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover that won't flip if it can't fully render below the"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-flipping.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverFlipping() { return (

This is a popover that will flip if it can't fully render below the button. This is a popover that won't flip if it can't fully render below the button.

) } `,__src__:"src/registry/new-york/example/popover/popover-flipping.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverFlipping"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Default"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover that will flip if it can't fully render below the"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">shouldFlip=false"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" shouldFlip"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover that won't flip if it can't fully render below the"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" button."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h4,{id:"container-padding",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#container-padding",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Container Padding"]}),` `,(0,n.jsxs)(o,{name:"popover-container-padding",children:[(0,n.jsx)(l.figure,{__src__:"src/registry/default/example/popover/popover-container-padding.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverContainerPadding() { return ( This is a popover. ) } `,__src__:"src/registry/default/example/popover/popover-container-padding.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverContainerPadding"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Container Padding"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" containerPadding"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"src/registry/new-york/example/popover/popover-container-padding.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`import { Button } from "@/components/ui/button" import { Popover, PopoverDialog, PopoverTrigger, } from "@/components/ui/popover" export function PopoverContainerPadding() { return ( This is a popover. ) } `,__src__:"src/registry/new-york/example/popover/popover-container-padding.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverDialog,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:" PopoverContainerPadding"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Container Padding"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" containerPadding"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"50"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverDialog"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[150px]"'}),(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" This is a popover."})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]})]})}function v(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(w);})(); ;return Component;

Popover

Installation

Examples

Basic

Positioning

Placement

Offset and Cross offset

Flipping

Container Padding