Popover morph

Installation

$ npx shadcn@latest add https://goodui.dev/r/popover-morph.json

The file lands in components/goodui/popover-morph.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/popover-morph works too.

Usage

import * as React from "react"
import { StickyNote } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { PopoverMorph } from "@/components/goodui/popover-morph"

export function AddNote({ onAdd }: { onAdd: (text: string) => void }) {
  const [draft, setDraft] = React.useState("")

  return (
    <PopoverMorph label={<><StickyNote /> Add note</>} title={<><StickyNote /> Note for Sofia</>}>
      {({ close }) => (
        <form
          onSubmit={(e) => {
            e.preventDefault()
            if (!draft.trim()) return
            onAdd(draft.trim())
            setDraft("")
            close()
          }}
          className="space-y-2.5"
        >
          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="Prefers a cooler tone than last time." rows={3} />
          <Button type="submit" size="sm" className="w-full">
            Save note
          </Button>
        </form>
      )}
    </PopoverMorph>
  )
}

When to use

Examples

<PopoverMorph
  label={<><TicketPercent /> {discount ?? "Discount"}</>}
  title={<><TicketPercent /> Apply a code</>}
  align="end"
  width={280}
>
  {({ close }) => (
    <form onSubmit={(e) => { e.preventDefault(); apply(code); close() }} className="flex gap-2">
      <Input data-autofocus value={code} onChange={(e) => setCode(e.target.value)} placeholder="WELCOME10" />
      <Button type="submit">Apply</Button>
    </form>
  )}
</PopoverMorph>

<PopoverMorph side="top" open={open} onOpenChange={setOpen} label={<><BellRing /> Remind</>}>
  <p className="text-sm text-muted-foreground">We will text the client 1 hour before.</p>
</PopoverMorph>

API reference

Accessibility

• •The trigger has aria-haspopup="dialog", aria-expanded, and aria-controls pointing at the panel while it is open.
• •The panel has role="dialog" and is named by its header (title, or label when no title is given). It is non-modal: no focus trap and no scroll lock.
• •The close button is labelled labels.close (default "Close").
• •An outside click closes the panel without moving focus; Esc and the close button return focus to the trigger.

Motion

• •The trigger and the panel share one surface (layoutId), so the button grows into the panel on a spring (bounce 0.1, 0.38 s) and shrinks back on close. The label slides into the panel header.
• •The close button pops in from scale 0.6; the body fades up 4px after a 60 ms delay (200 ms) and fades out in 60 ms.
• •Reduced motion: the morph and the body appear without movement (duration 0).

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related