Are the ai2 Motion popovers free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Motion popovers

Five popovers with distinct entrances: fade, scale, slide, pop and spring. Each is self-contained (no radix), sized, token-driven, opens on click and closes on outside click or Escape.

PopoverMotion

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/popover-motion

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion

Copy the source

components/ui/popover-motion.tsx

"use client"

import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Motion popover family: 5 anchored panels where the entrance animation makes the
   DIFFERENCE. The panel is plain (bg-popover) and identical in every export; the
   only thing that changes is the enter/exit motion. Each export is a complete
   popover: internal open/closed state (uncontrolled defaultOpen or controlled
   open/onOpenChange), NO radix or portal - a relative inline-flex wrapper + a panel
   absolutely positioned BELOW the trigger (top-full mt-2). The trigger toggles on
   CLICK; it closes on an outside click (window pointerdown, with inner clicks
   ignored via the wrapper ref) and on Escape. The trigger is a real button.
   AnimatePresence handles enter/exit; under reduced motion ALL transforms drop away
   and only an opacity fade remains. Color comes ONLY from tokens, via alpha
   color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const panelSize: Record<StyledSize, string> = {
  sm: "w-56",
  md: "w-64",
  lg: "w-72",
  xl: "w-80",
}

interface PopoverProps {
  size?: StyledSize
  trigger?: React.ReactNode
  children?: React.ReactNode
  className?: string
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (o: boolean) => void
}

const panelBase =
  "absolute left-0 top-full z-50 mt-2 origin-top rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none"

const triggerBtn =
  "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

/* Controlled/uncontrolled acik durum yonetimi. */
function usePopoverState(props: PopoverProps) {
  const { open, defaultOpen, onOpenChange } = props
  const isControlled = open !== undefined
  const [internal, setInternal] = React.useState(defaultOpen ?? false)
  const isOpen = isControlled ? open : internal

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setInternal(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )

  return { isOpen, setOpen }
}

/* Shared shell: a relative wrapper plus trigger plus an AnimatePresence panel. panelMotion carries the enter/exit animation supplied from outside; it differs in every export. */
function PopoverShell({
  props,
  panelClassName,
  panelMotion,
  children,
}: {
  props: PopoverProps
  panelClassName?: string
  panelMotion?: {
    initial: Record<string, number>
    animate: Record<string, number>
    exit: Record<string, number>
    transition?: Record<string, unknown>
  }
  children: React.ReactNode | ((close: () => void) => React.ReactNode)
}) {
  const { size = "md", trigger, className } = props
  const { isOpen, setOpen } = usePopoverState(props)
  const reduce = useReducedMotion()
  const wrapperRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    const onPointer = (e: PointerEvent) => {
      const node = wrapperRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) {
        setOpen(false)
      }
    }
    window.addEventListener("keydown", onKey)
    window.addEventListener("pointerdown", onPointer)
    return () => {
      window.removeEventListener("keydown", onKey)
      window.removeEventListener("pointerdown", onPointer)
    }
  }, [isOpen, setOpen])

  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
  const motionProps = reduce || !panelMotion ? fade : panelMotion

  return (
    <div ref={wrapperRef} data-slot="styled-popover" className="relative inline-flex">
      <span
        data-slot="styled-popover-trigger"
        className="inline-flex"
        onClick={() => setOpen(!isOpen)}
      >
        {trigger ?? (
          <button type="button" aria-haspopup="dialog" aria-expanded={isOpen} className={triggerBtn}>
            Open
          </button>
        )}
      </span>

      <AnimatePresence>
        {isOpen ? (
          <motion.div
            role="dialog"
            className={cn(panelBase, panelSize[size], panelClassName, className)}
            initial={motionProps.initial}
            animate={motionProps.animate}
            exit={motionProps.exit}
            transition={
              reduce
                ? { duration: 0.15, ease: "easeOut" }
                : panelMotion?.transition ?? { duration: 0.18, ease: "easeOut" }
            }
          >
            {typeof children === "function" ? children(() => setOpen(false)) : children}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

const defaultBody = "A self-contained popover with a distinct entrance animation."

/* Fade: it appears softly with opacity alone, no transform. */
export function FadePopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelMotion={{
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
        transition: { duration: 0.22, ease: "easeOut" },
      }}
    >
      {props.children ?? defaultBody}
    </PopoverShell>
  )
}

/* Scale: it opens by growing slightly from its origin above (scale 0.92 -> 1). */
export function ScalePopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelMotion={{
        initial: { opacity: 0, scale: 0.92 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.92 },
        transition: { duration: 0.18, ease: "easeOut" },
      }}
    >
      {props.children ?? defaultBody}
    </PopoverShell>
  )
}

/* Slide: enters sliding downwards from under the trigger (y -10 -> 0). */
export function SlidePopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelMotion={{
        initial: { opacity: 0, y: -10 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -10 },
        transition: { duration: 0.2, ease: "easeOut" },
      }}
    >
      {props.children ?? defaultBody}
    </PopoverShell>
  )
}

/* Pop: dusuk damping'li yay ile buyuyup hafif overshoot yaparak patlar. */
export function PopPopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelMotion={{
        initial: { opacity: 0, scale: 0.8 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.85 },
        transition: { type: "spring", stiffness: 500, damping: 12 },
      }}
    >
      {props.children ?? defaultBody}
    </PopoverShell>
  )
}

/* Spring: yumusak yay ile hem kayip hem buyuyerek yerlesir (y + scale). */
export function SpringPopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelMotion={{
        initial: { opacity: 0, scale: 0.96, y: -8 },
        animate: { opacity: 1, scale: 1, y: 0 },
        exit: { opacity: 0, scale: 0.96, y: -8 },
        transition: { type: "spring", stiffness: 320, damping: 24 },
      }}
    >
      {props.children ?? defaultBody}
    </PopoverShell>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Fade

Fades in softly with no transform.

Scale

Grows from its top origin as it appears.

Slide

Slides down from under the trigger.

Pop

Bursts in with a spring overshoot.

Spring

Settles in with a gentle spring.

ai2 Motion popovers: 5 styled variations on the token system

The ai2 Motion popovers are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-anchored floating panels with distinct entrances. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion animates a fade, scale, slide, spring pop or gentle spring on enter and exit. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transforms are skipped and the panel fades instead.

What is in the ai2 Motion popovers?

5 exports in one file: Fade, Scale, Slide, Pop and Spring. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion animates a fade, scale, slide, spring pop or gentle spring on enter and exit.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the panel fades instead.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Motion popovers sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.