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

Compact popovers

Five density and size layouts: mini, dense, wide, tall and split. Each is self-contained (no radix), sized, token-driven, opens on click and closes on outside click or Escape.

PopoverCompact

Installation

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

Run the following command

npx shadcn@latest add @ai2/popover-compact

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-compact.tsx

"use client"

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

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

/* Compact popover family: 5 anchored panels. The shared mechanism is THE SAME as
   popover-styled (a self-contained shell, NO radix/portal); the DIFFERENCE is the
   content density and the panel size. Each export is a complete popover: internal
   open/closed state (uncontrolled defaultOpen or controlled open/onOpenChange), 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. StyledSize scales the panel width in every
   variant; the content layout is specific to the variant. Color comes ONLY from
   tokens, via alpha color-mix. */

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

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 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"

/* Ic satirlarda ortak hover + focus davranisi (token alpha ile). */
const rowClass =
  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 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 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground [&_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 }
}

const panelMotion = {
  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 } as const,
}

/* Shared shell: a relative wrapper plus trigger plus an AnimatePresence panel. sizeMap carries the variant-specific width scale (the core of the Compact theme). */
function PopoverShell({
  props,
  sizeMap,
  panelClassName,
  children,
  role = "dialog",
}: {
  props: PopoverProps
  sizeMap: Record<StyledSize, string>
  panelClassName?: string
  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 ? 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, sizeMap[size], panelClassName, className)}
            initial={motionProps.initial}
            animate={motionProps.animate}
            exit={motionProps.exit}
            transition={reduce ? { duration: 0.18, ease: "easeOut" } : panelMotion.transition}
          >
            {typeof children === "function" ? children(() => setOpen(false)) : children}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* Mini: very small, a one-line hint. Icon plus short text, tight padding. */
const miniSize: Record<StyledSize, string> = {
  sm: "w-40",
  md: "w-44",
  lg: "w-48",
  xl: "w-52",
}

export function MiniPopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} sizeMap={miniSize} panelClassName="p-2">
      <div className="flex items-center gap-2 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground [&_i]:text-base [&_i]:leading-none">
        <Info />
        <span className="truncate text-xs text-muted-foreground">
          {props.children ?? "Quick hint"}
        </span>
      </div>
    </PopoverShell>
  )
}

/* Dense: sikisik liste. Kucuk satirlar, dar dikey bosluk. */
const denseSize: Record<StyledSize, string> = {
  sm: "w-52",
  md: "w-56",
  lg: "w-60",
  xl: "w-64",
}

export function DensePopover(props: PopoverProps & { items?: string[] }) {
  const { items, ...rest } = props
  const list = items ?? ["Rename", "Duplicate", "Move to", "Archive", "Delete"]
  return (
    <PopoverShell props={rest} sizeMap={denseSize} panelClassName="p-1" role="menu">
      {(close) => (
        <div className="flex flex-col gap-0.5">
          {list.map((item, i) => (
            <button
              key={`${item}-${i}`}
              type="button"
              role="menuitem"
              className={rowClass}
              onClick={close}
            >
              <ArrowRight />
              <span className="truncate">{item}</span>
            </button>
          ))}
        </div>
      )}
    </PopoverShell>
  )
}

/* Wide: genis yatay. Ikon blogu + metin, tek satirda yayilan duzen. */
const wideSize: Record<StyledSize, string> = {
  sm: "w-72",
  md: "w-80",
  lg: "w-96",
  xl: "w-[28rem]",
}

export function WidePopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} sizeMap={wideSize} panelClassName="p-4">
      <div className="flex items-center gap-4">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] [&_svg]:size-5 [&_svg]:text-muted-foreground">
          <Sparkles />
        </span>
        <div className="min-w-0 flex-1">
          <div className="truncate text-sm font-medium text-popover-foreground">Wide layout</div>
          <p className="truncate text-xs text-muted-foreground">
            {props.children ?? "A horizontal panel with room to breathe."}
          </p>
        </div>
        <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-xs 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"
        >
          Open
        </button>
      </div>
    </PopoverShell>
  )
}

/* Tall: dar + uzun, scrollable. Sabit yukseklikte dikey liste, overflow scroll. */
const tallSize: Record<StyledSize, string> = {
  sm: "w-44",
  md: "w-48",
  lg: "w-52",
  xl: "w-56",
}

export function TallPopover(props: PopoverProps & { items?: string[] }) {
  const { items, ...rest } = props
  const list =
    items ??
    ["Overview", "Activity", "Members", "Files", "Settings", "Billing", "Integrations", "Danger zone"]
  return (
    <PopoverShell props={rest} sizeMap={tallSize} panelClassName="p-1" role="menu">
      {(close) => (
        <div className="flex max-h-48 flex-col gap-0.5 overflow-y-auto">
          {list.map((item, i) => (
            <button
              key={`${item}-${i}`}
              type="button"
              role="menuitem"
              className={rowClass}
              onClick={close}
            >
              <span className="truncate">{item}</span>
            </button>
          ))}
        </div>
      )}
    </PopoverShell>
  )
}

/* Split: two columns or panes. A list on the left, a vertically separated detail pane on the right. */
const splitSize: Record<StyledSize, string> = {
  sm: "w-72",
  md: "w-80",
  lg: "w-96",
  xl: "w-[26rem]",
}

export function SplitPopover(props: PopoverProps) {
  return (
    <PopoverShell props={props} sizeMap={splitSize} panelClassName="p-0">
      {(close) => (
        <div className="flex divide-x divide-border">
          <div className="flex w-1/2 flex-col gap-0.5 p-1.5">
            {["Search", "Recent", "Shared"].map((item) => (
              <button key={item} type="button" className={rowClass} onClick={close}>
                <Search />
                <span className="truncate">{item}</span>
              </button>
            ))}
          </div>
          <div className="flex w-1/2 flex-col justify-between gap-3 p-3">
            <p className="text-xs text-muted-foreground">
              {props.children ?? "A second pane with placeholder detail content."}
            </p>
            <button
              type="button"
              className="inline-flex h-8 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-3 text-xs 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"
              onClick={close}
            >
              <Check />
              Apply
            </button>
          </div>
        </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.

Mini

A tiny single-line hint with an icon.

Dense

A tightly packed list of actions.

Wide

A wide horizontal layout with an icon block.

Tall

A narrow, tall, scrollable list.

Split

Two panes split by a divider.

ai2 Compact popovers: 5 styled variations on the token system

The ai2 Compact popovers are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-anchored floating panels tuned for density and size. 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 Compact popovers?

5 exports in one file: Mini, Dense, Wide, Tall and Split. 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 Compact 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.