Component

Popover

A raised white panel with 8px corners and the floating shadow that grows out of the control that opened it.

npx -y github:anwarlemu/inkbox-brand-cli#release add popover

Preview

Open

Usage

Use for a small form or detail tied to one control (rename a mailbox, set a phone line's state). Put a PopoverHeader with a PopoverTitle and PopoverDescription first, then the fields. For choosing one value from a list use Select or Combobox; for actions use Dropdown Menu.

Avoid

A popover that opens on hover (use Hover Card)
A dark or lilac popover panel
Scaling from the center instead of the trigger
Long forms that scroll inside a popover

Exports: Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger. This component is a client component.

Dependencies: surface, radix-ui.

Example

examples/popover.tsx

1"use client";23import * as React from "react";4import { PencilSimpleIcon } from "@phosphor-icons/react/ssr";56import { Button } from "@/components/ui/button";7import { Input } from "@/components/ui/input";8import { Label } from "@/components/ui/label";9import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";1011function RenameForm({ onDone }: { onDone?: () => void }) {12  const [name, setName] = React.useState("Acme support");13  return (14    <form15      className="grid gap-3"16      onSubmit={(event) => {17        event.preventDefault();18        onDone?.();19      }}20    >21      <PopoverHeader>22        <PopoverTitle>Display name</PopoverTitle>23        <PopoverDescription>Shown as the sender on acme@inkboxmail.com.</PopoverDescription>24      </PopoverHeader>25      <div className="grid gap-1">26        <Label htmlFor="display-name">Name</Label>27        <Input id="display-name" value={name} onChange={(e) => setName(e.target.value)} />28      </div>29      <Button type="submit" className="w-full">30        Save31      </Button>32    </form>33  );34}3536export function Preview() {37  const [open, setOpen] = React.useState(false);38  return (39    <div className="flex justify-center">40      <Popover open={open} onOpenChange={setOpen}>41        <PopoverTrigger asChild>42          <Button variant="outline">43            <PencilSimpleIcon weight="fill" />44            Rename mailbox45          </Button>46        </PopoverTrigger>47        <PopoverContent align="start">48          <RenameForm onDone={() => setOpen(false)} />49        </PopoverContent>50      </Popover>51    </div>52  );53}5455export function Open() {56  return (57    <div className="flex min-h-80 items-start justify-center">58      <Popover defaultOpen>59        <PopoverTrigger asChild>60          <Button variant="outline">61            <PencilSimpleIcon weight="fill" />62            Rename mailbox63          </Button>64        </PopoverTrigger>65        <PopoverContent>66          <RenameForm />67        </PopoverContent>68      </Popover>69    </div>70  );71}

Source

components/ui/popover.tsx

1"use client";23import * as React from "react";4import { Popover as PopoverPrimitive } from "radix-ui";56import { usePortalContainer } from "@/lib/surface";7import { cn } from "@/lib/utils";89// A popover, extrapolated from the console's raised white panels (Figma 427:2715: the select and the selected tab10// carry Shadow/S): white with 8px corners and the floating shadow (Shadow/S's ring with a softer, longer drop), 16px of11// padding, 14px ink text. It grows out of its trigger from 96 percent with a fade (200ms, the strong ease-out) and12// leaves faster than it came.13function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {14  return <PopoverPrimitive.Root data-slot="popover" {...props} />;15}1617function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {18  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;19}2021function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {22  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;23}2425function PopoverContent({ className, align = "center", sideOffset = 6, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {26  const container = usePortalContainer();27  return (28    <PopoverPrimitive.Portal container={container}>29      <PopoverPrimitive.Content30        data-slot="popover-content"31        align={align}32        sideOffset={sideOffset}33        className={cn(34          "z-50 flex w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) flex-col gap-3 rounded-control bg-surface p-4 text-body leading-body text-fg shadow-floating outline-none data-[state=closed]:animate-pop-out data-[state=open]:animate-pop-in",35          className,36        )}37        {...props}38      />39    </PopoverPrimitive.Portal>40  );41}4243/** The popover's head: its title over a short muted line. */44function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {45  return <div data-slot="popover-header" className={cn("flex flex-col gap-0.5", className)} {...props} />;46}4748function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {49  return <h2 data-slot="popover-title" className={cn("font-sans text-body-lg leading-body font-medium text-fg", className)} {...props} />;50}5152function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {53  return <p data-slot="popover-description" className={cn("text-body leading-body text-fg-muted", className)} {...props} />;54}5556export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

Reference: Extrapolated from the Inkbox console (Figma 427:2715): the raised white panel of the select and the selected tab (Shadow/S), the field and button sizes.