2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tdfc,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const OpenContext = createContext(false); const OFFSET = { top: { y: 6 }, bottom: { y: -6 }, left: { x: 6 }, right: { x: -6 } } as const; export function Popover({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); return ( ); } export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverAnchor = PopoverPrimitive.Anchor; export const PopoverClose = PopoverPrimitive.Close; export interface PopoverContentProps extends ComponentProps { /** Point at the trigger with a small arrow. */ arrow?: boolean; } export function PopoverContent({ side = "bottom", align = "center", sideOffset = 8, collisionPadding = 12, arrow = false, className, children, ...props }: PopoverContentProps) { const open = useContext(OpenContext); return ( {open && ( {children} {arrow && ( )} )} ); } export function PopoverTitle({ className, ...props }: ComponentProps<"p">) { return

; } export function PopoverDescription({ className, ...props }: ComponentProps<"p">) { return

; } export default Popover; 2e:T84ba,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { Popover as PopoverPrimitive } from "radix-ui";
import { createContext, useCallback, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const OpenContext = createContext(false);

const OFFSET = { top: { y: 6 }, bottom: { y: -6 }, left: { x: 6 }, right: { x: -6 } } as const;

export function Popover({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  const setOpen = useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );
  return (
    <OpenContext.Provider value={open}>
      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} {...props} />
    </OpenContext.Provider>
  );
}

export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverAnchor = PopoverPrimitive.Anchor;
export const PopoverClose = PopoverPrimitive.Close;

export interface PopoverContentProps extends ComponentProps<typeof PopoverPrimitive.Content> {
  /** Point at the trigger with a small arrow. */
  arrow?: boolean;
}

export function PopoverContent({ side = "bottom", align = "center", sideOffset = 8, collisionPadding = 12, arrow = false, className, children, ...props }: PopoverContentProps) {
  const open = useContext(OpenContext);
  return (
    <AnimatePresence>
      {open && (
        <PopoverPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <PopoverPrimitive.Content forceMount asChild side={side} align={align} sideOffset={sideOffset} collisionPadding={collisionPadding} {...props}>
              <motion.div
                className={cn(
                  "z-50 w-72 max-h-(--radix-popover-content-available-height) origin-(--radix-popover-content-transform-origin) rounded-2xl bg-white p-4 text-neutral-950 outline-none",
                  "shadow-[0_16px_40px_-12px_rgb(0_0_0/0.2),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06]",
                  "dark:bg-neutral-900 dark:text-white dark:shadow-[0_16px_40px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
                  !arrow && "overflow-y-auto",
                  className,
                )}
                initial={{ opacity: 0, scale: 0.96, ...OFFSET[side] }}
                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                transition={{ type: "spring", bounce: 0.16, duration: 0.32 }}
              >
                {children}
                {arrow && (
                  <PopoverPrimitive.Arrow width={14} height={7} className="fill-white drop-shadow-[0_1px_0_rgb(0_0_0/0.06)] dark:fill-neutral-900 dark:drop-shadow-[0_1px_0_rgb(255_255_255/0.1)]" />
                )}
              </motion.div>
            </PopoverPrimitive.Content>
          </MotionConfig>
        </PopoverPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export function PopoverTitle({ className, ...props }: ComponentProps<"p">) {
  return <p className={cn("text-[14px] font-semibold tracking-[-0.01em]", className)} {...props} />;
}

export function PopoverDescription({ className, ...props }: ComponentProps<"p">) {
  return <p className={cn("mt-0.5 text-[13px] text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

export default Popover;

2f:T6d9,import { SlidersHorizontal } from "lucide-react"; import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; const input = "h-8 w-full rounded-[10px] bg-white px-2.5 text-[13px] text-neutral-950 outline-none ring-1 ring-inset ring-black/[0.1] focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25"; const fields = [ ["Width", "100%"], ["Max width", "640px"], ["Height", "auto"], ["Padding", "24px"], ]; export default function Demo() { return ( Dimensions Dimensions Set the size of the selected frame.

{fields.map(([label, value]) => ( {label} ))}

); } 30:T2fe6,

import { SlidersHorizontal } from "lucide-react";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

const input =
  "h-8 w-full rounded-[10px] bg-white px-2.5 text-[13px] text-neutral-950 outline-none ring-1 ring-inset ring-black/[0.1] focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25";

const fields = [
  ["Width", "100%"],
  ["Max width", "640px"],
  ["Height", "auto"],
  ["Padding", "24px"],
];

export default function Demo() {
  return (
    <Popover defaultOpen>
      <PopoverTrigger className={trigger}>
        <SlidersHorizontal />
        Dimensions
      </PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Dimensions</PopoverTitle>
        <PopoverDescription>Set the size of the selected frame.</PopoverDescription>
        <div className="mt-4 grid gap-2.5">
          {fields.map(([label, value]) => (
            <label key={label} className="grid grid-cols-[88px_1fr] items-center gap-3 text-[13px] text-neutral-600 dark:text-neutral-400">
              {label}
              <input className={input} defaultValue={value} />
            </label>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}

31:T440,import { Info } from "lucide-react"; import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; export default function Example() { return ( What’s a preview? Branch previews Every pull request gets its own URL, rebuilt on each push and removed when the branch is merged. ); } 32:T18a0,

import { Info } from "lucide-react";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger className={trigger}>
        <Info />
        What’s a preview?
      </PopoverTrigger>
      <PopoverContent arrow side="top" className="w-64">
        <PopoverTitle>Branch previews</PopoverTitle>
        <PopoverDescription>Every pull request gets its own URL, rebuilt on each push and removed when the branch is merged.</PopoverDescription>
      </PopoverContent>
    </Popover>
  );
}

33:T47d,import { Popover, PopoverContent, PopoverTrigger } from "@/components/scalar-ui/popover"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; const sides = ["top", "right", "bottom", "left"] as const; export default function Example() { return (

{sides.map((side) => ( {side} Opens on the {side}. ))}

); } 34:T2272,

import { Popover, PopoverContent, PopoverTrigger } from "@/components/scalar-ui/popover";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

const sides = ["top", "right", "bottom", "left"] as const;

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {sides.map((side) => (
        <Popover key={side}>
          <PopoverTrigger className={`${trigger} capitalize`}>{side}</PopoverTrigger>
          <PopoverContent side={side} className="w-48 text-[13px] text-neutral-600 dark:text-neutral-300">
            Opens on the <span className="font-medium text-neutral-950 dark:text-white">{side}</span>.
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

35:T871,"use client"; import { Check, Copy, Link2 } from "lucide-react"; import { useState } from "react"; import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; const input = "h-8 w-full rounded-[10px] bg-white px-2.5 text-[13px] text-neutral-950 outline-none ring-1 ring-inset ring-black/[0.1] focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25"; export default function Example() { const [copied, setCopied] = useState(false); const url = "https://aurora.app/p/branch-previews"; return ( setCopied(false)}> Share Share link Anyone with the link can view this preview.

); } 36:T3bb0,

"use client";

import { Check, Copy, Link2 } from "lucide-react";
import { useState } from "react";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/scalar-ui/popover";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

const input =
  "h-8 w-full rounded-[10px] bg-white px-2.5 text-[13px] text-neutral-950 outline-none ring-1 ring-inset ring-black/[0.1] focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25";

export default function Example() {
  const [copied, setCopied] = useState(false);
  const url = "https://aurora.app/p/branch-previews";
  return (
    <Popover onOpenChange={() => setCopied(false)}>
      <PopoverTrigger className={trigger}>
        <Link2 />
        Share
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80">
        <PopoverTitle>Share link</PopoverTitle>
        <PopoverDescription>Anyone with the link can view this preview.</PopoverDescription>
        <div className="mt-3 flex gap-2">
          <input readOnly value={url} aria-label="Link" className={input} />
          <button
            type="button"
            onClick={() => {
              navigator.clipboard?.writeText(url).catch(() => {});
              setCopied(true);
            }}
            aria-label="Copy link"
            className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-neutral-950 text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200"
          >
            {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
          </button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

37:T945,import { Bell } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/scalar-ui/popover"; const items = [ { who: "Maya", what: "commented on Branch previews", when: "2m", unread: true }, { who: "Jon", what: "promoted #482 to production", when: "1h", unread: true }, { who: "Ari", what: "invited you to aurora-docs", when: "1d", unread: false }, ]; export default function Example() { return (

Notifications

{items.map((n) => (

{n.who[0]}

{n.who} {n.what} {n.when} ago

{n.unread && }

))}

); } 38:T4536,

import { Bell } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/scalar-ui/popover";

const items = [
  { who: "Maya", what: "commented on Branch previews", when: "2m", unread: true },
  { who: "Jon", what: "promoted #482 to production", when: "1h", unread: true },
  { who: "Ari", what: "invited you to aurora-docs", when: "1d", unread: false },
];

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger
        aria-label="Notifications"
        className="relative flex size-10 items-center justify-center rounded-xl text-neutral-600 ring-1 ring-inset ring-black/[0.08] transition-colors hover:bg-neutral-50 data-[state=open]:bg-neutral-50 dark:text-neutral-300 dark:ring-white/[0.12] dark:hover:bg-white/[0.04]"
      >
        <Bell className="size-[18px]" />
        <span className="absolute right-2 top-2 size-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-neutral-950" />
      </PopoverTrigger>
      <PopoverContent align="end" className="w-80 p-0">
        <div className="flex items-center justify-between border-b border-black/[0.06] px-4 py-3 dark:border-white/[0.08]">
          <p className="text-[14px] font-semibold">Notifications</p>
          <button type="button" className="text-[12.5px] font-medium text-neutral-500 hover:text-neutral-950 dark:hover:text-white">
            Mark all read
          </button>
        </div>
        <div className="p-1.5">
          {items.map((n) => (
            <div key={n.what} className="flex items-start gap-3 rounded-xl px-2.5 py-2.5 transition-colors hover:bg-neutral-950/[0.03] dark:hover:bg-white/[0.04]">
              <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-[11px] font-semibold text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">{n.who[0]}</span>
              <p className="flex-1 text-[13px] leading-5 text-neutral-600 dark:text-neutral-400">
                <span className="font-medium text-neutral-950 dark:text-white">{n.who}</span> {n.what}
                <span className="block text-[12px] text-neutral-400">{n.when} ago</span>
              </p>
              {n.unread && <span className="mt-2 size-1.5 rounded-full bg-neutral-950 dark:bg-white" />}
            </div>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}

29:["$","section","popover",{"id":"popover","aria-labelledby":"popover-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"popover-title","className":"sr-only","children":"Popover"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"popover","gated":{"unlocked":true,"files":[{"name":"popover.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"with-arrow":{"name":"with-arrow.tsx","code":"$31","html":"$32"},"sides":{"name":"sides.tsx","code":"$33","html":"$34"},"share":{"name":"share.tsx","code":"$35","html":"$36"},"notifications":{"name":"notifications.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add popover","shadcn":"npx shadcn@latest add https://scalarui.com/r/popover.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Popovers

Popovers

With Arrow

Sides

Share

Notifications