Are the ai2 Styled popover 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.

Styled popover

Five popovers: an arrow, glass, a menu, a form and a rich layout. Each is self-contained (no radix), sized, token-driven, opens on click and closes on outside click or Escape.

OverlaysPopover

Installation

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

Run the following command

npx shadcn@latest add @ai2/popover-styled

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/popover-styled.tsx

"use client"

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

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

/* Popover family: 5 decorative anchored panels. 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 fade+scale (from above); only a fade under reduced motion. 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. */
function PopoverShell({
  props,
  panelClassName,
  panelMotion,
  children,
  role = "dialog",
}: {
  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)
  role?: string
}) {
  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={role}
            className={cn(panelBase, panelSize[size], panelClassName, className)}
            initial={motionProps.initial}
            animate={motionProps.animate}
            exit={motionProps.exit}
            transition={panelMotion?.transition ?? { duration: 0.18, ease: "easeOut" }}
          >
            {typeof children === "function" ? children(() => setOpen(false)) : children}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

const bespokeMotion = {
  initial: { opacity: 0, scale: 0.96, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.96, y: -6 },
  transition: { type: "spring", stiffness: 340, damping: 26 },
}

/* Arrow: trigger'a dogru bakan kucuk token oklu klasik panel. */
export function ArrowPopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} panelMotion={bespokeMotion}>
      <span className="absolute -top-1.5 left-5 size-3 rotate-45 rounded-[2px] border-l border-t border-border bg-popover" />
      <div className="relative">{props.children ?? "Popover content anchored below the trigger."}</div>
    </PopoverShell>
  )
}

/* Glass: buzlu cam panel + backdrop-blur. */
export function GlassPopover(props: PopoverProps) {
  return (
    <PopoverShell
      props={props}
      panelClassName="border-border bg-[color-mix(in_oklab,var(--color-popover)_75%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)] supports-[backdrop-filter]:backdrop-blur-xl shadow-[inset_0_1px_0_color-mix(in_oklab,var(--color-foreground)_12%,transparent)]"
      panelMotion={bespokeMotion}
    >
      {props.children ?? "Frosted glass popover with a blurred backdrop."}
    </PopoverShell>
  )
}

/* Menu: kucuk dikey menu listesi olarak icerik. items ile satirlar. */
export function MenuPopover(props: PopoverProps & { items?: string[] }) {
  const { items, ...rest } = props
  const list = items ?? ["Profile", "Settings", "Sign out"]
  return (
    <PopoverShell props={rest} panelClassName="p-1.5" panelMotion={bespokeMotion} role="menu">
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${item}-${i}`}
              type="button"
              role="menuitem"
              className="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50"
              onClick={close}
            >
              {item}
            </button>
          ))}
        </div>
      )}
    </PopoverShell>
  )
}

/* Form: kompakt form gorunumu - label + input + onay butonu. */
export function FormPopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} panelMotion={bespokeMotion}>
      <div className="flex flex-col gap-3">
        <label className="text-sm font-medium text-popover-foreground">
          Label
          <input
            type="text"
            placeholder="Type a value"
            className="mt-1.5 flex h-9 w-full rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          />
        </label>
        {props.children}
        <button
          type="button"
          className="inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
        >
          <Check />
          Confirm
        </button>
      </div>
    </PopoverShell>
  )
}

/* Rich: baslik satiri + govde metni + footer aksiyonu. */
export function RichPopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} panelClassName="p-0" panelMotion={bespokeMotion}>
      <div className="border-b border-border px-4 py-3 text-sm font-semibold text-popover-foreground">
        Dimensions
      </div>
      <div className="px-4 py-3 text-sm text-muted-foreground">
        {props.children ?? "Set the width and height for the selected layer."}
      </div>
      <div className="flex justify-end border-t border-border px-4 py-3">
        <button
          type="button"
          className="inline-flex h-8 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-3 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"
        >
          Apply
        </button>
      </div>
    </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.

Arrow

A token arrow points back to the trigger.

Glass

A frosted glass panel with a blur.

Content rendered as a small vertical menu.

Form

A compact form with a label, input and confirm.

Rich

A title, body text and a footer action.

ai2 Styled popover: 5 styled variations on the token system

The ai2 Styled popover are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-anchored floating panels. 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 fades and scales the panel in from the trigger. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the scale is skipped and the panel appears instantly.

What is in the ai2 Styled popover?

5 exports in one file: Arrow, Glass, Menu, Form and Rich. 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 fades and scales the panel in from the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the panel appears instantly.
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 Styled popover 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.