Are the ai2 Glass dropdown menus free?

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

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, the scale is skipped and the panel fades in.

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.

Glass dropdown menus

Five dropdown menus that share one idea: a translucent, backdrop-blurred panel. They differ in blur strength, transparency and tint. Each is self-contained (no radix), sized, token-driven, opens on click and closes on outside click, Escape or item select.

Dropdown menuGlass

Installation

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

Run the following command

npx shadcn@latest add @ai2/dropdown-menu-glass

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/dropdown-menu-glass.tsx

"use client"

import * as React from "react"
import {
  Bell,
  ChevronDown,
  CreditCard,
  Layers,
  LogOut,
  Settings,
  Sparkles,
  User,
} from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass dropdown family: 5 frosted-glass menus. The shared idea is a translucent
   panel + backdrop-blur; the variants differ in transparency and tint. Each export
   is a complete dropdown: a relative wrapper + a real trigger button + a panel
   absolutely positioned BELOW the trigger. NO radix or portal. It closes on an
   outside click, on Escape (focus returns to the trigger) and on an item selection.
   The arrow keys move between items. Color comes ONLY from tokens, via alpha
   color-mix.

   The glass surface derives from the glassDepth scale in @ai2/glass (AGENTS.md 4.5)
   - the blur is never hand-written. The step gives the surface, the variant gives
   the character (tint, edge). Because glassDepth carries a [box-shadow], the
   shadow-lg in panelBase was REMOVED: same tailwind-merge group, and had it stayed
   it would have won over the signature. The ambient shadow is now part of the
   signature itself. */

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

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

const itemHeight: Record<StyledSize, string> = {
  sm: "min-h-8 py-1.5",
  md: "min-h-9 py-2",
  lg: "min-h-10 py-2.5",
  xl: "min-h-11 py-3",
}

export interface StyledMenuItem {
  label: React.ReactNode
  icon?: React.ReactNode
  description?: React.ReactNode
  onSelect?: () => void
}

interface StyledMenuProps {
  className?: string
  size?: StyledSize
  label?: React.ReactNode
  items?: StyledMenuItem[]
}

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

const panelBase =
  "origin-top rounded-xl border p-1.5 text-sm text-popover-foreground outline-none"

const itemBase =
  "flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const menuMotion = {
  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" as const, stiffness: 340, damping: 26 },
}

const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }

/* Internal open/closed state: closes on an outside click and on Escape; Escape returns focus to the trigger. */
function useMenuState() {
  const [open, setOpen] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  React.useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false)
        triggerRef.current?.focus()
      }
    }
    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)
    }
  }, [open])

  return { open, setOpen, wrapperRef, triggerRef }
}

/* Ok tuslari ile itemlar arasinda gezinme. */
function useArrowNav(panelRef: React.RefObject<HTMLDivElement | null>) {
  return React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
      const panel = panelRef.current
      if (!panel) return
      const nodes = Array.from(
        panel.querySelectorAll<HTMLButtonElement>(
          '[role="menuitem"],[role="menuitemcheckbox"]'
        )
      )
      if (nodes.length === 0) return
      e.preventDefault()
      const current = nodes.indexOf(document.activeElement as HTMLButtonElement)
      const next =
        e.key === "ArrowDown"
          ? (current + 1) % nodes.length
          : current <= 0
            ? nodes.length - 1
            : current - 1
      nodes[next]?.focus()
    },
    [panelRef]
  )
}

/* Shared shell: a relative wrapper plus trigger plus an absolutely positioned glass panel. */
function MenuShell({
  size = "md",
  label = "Options",
  className,
  panelClassName,
  children,
}: {
  size?: StyledSize
  label?: React.ReactNode
  className?: string
  panelClassName?: string
  children: (close: () => void) => React.ReactNode
}) {
  const { open, setOpen, wrapperRef, triggerRef } = useMenuState()
  const panelRef = React.useRef<HTMLDivElement>(null)
  const onArrow = useArrowNav(panelRef)
  const reduce = useReducedMotion()
  const id = React.useId()
  const panelId = `${id}-menu`

  const active = reduce ? fade : menuMotion

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-dropdown-menu"
      className={cn("relative inline-flex", className)}
    >
      <button
        ref={triggerRef}
        type="button"
        data-slot="styled-dropdown-menu-trigger"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={open ? panelId : undefined}
        className={triggerBtn}
        onClick={() => setOpen(!open)}
      >
        {label}
        <ChevronDown
          className={cn("transition-transform duration-200", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open ? (
          <div className={cn("absolute left-0 top-full z-50 mt-1", panelWidth[size])}>
            <motion.div
              ref={panelRef}
              id={panelId}
              role="menu"
              data-slot="styled-dropdown-menu-content"
              className={cn(panelBase, panelClassName)}
              initial={active.initial}
              animate={active.animate}
              exit={active.exit}
              transition={reduce ? { duration: 0.16 } : menuMotion.transition}
              onKeyDown={onArrow}
            >
              {children(() => setOpen(false))}
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* The item list renders the same in every variant. */
function MenuList({
  items,
  size,
  close,
}: {
  items: StyledMenuItem[]
  size: StyledSize
  close: () => void
}) {
  return (
    <div className="flex flex-col">
      {items.map((item, i) => (
        <button
          key={`${i}`}
          type="button"
          role="menuitem"
          tabIndex={0}
          className={cn(itemBase, itemHeight[size])}
          onClick={() => {
            item.onSelect?.()
            close()
          }}
        >
          {item.icon ? (
            <span className="flex shrink-0 items-center text-muted-foreground">
              {item.icon}
            </span>
          ) : null}
          {item.label}
        </button>
      ))}
    </div>
  )
}

const accountItems: StyledMenuItem[] = [
  { label: "Profile", icon: <User /> },
  { label: "Billing", icon: <CreditCard /> },
  { label: "Settings", icon: <Settings /> },
  { label: "Sign out", icon: <LogOut /> },
]

const workspaceItems: StyledMenuItem[] = [
  { label: "Overview", icon: <Layers /> },
  { label: "Members", icon: <User /> },
  { label: "Notifications", icon: <Bell /> },
  { label: "Settings", icon: <Settings /> },
]

/* Frost: classic frosted glass. Depth md (8px): a dropdown is the exact example the library cites when describing the md step - the same as glass.overlay. The neutral ground is left to the library; the character is the soft border alone. */
export function FrostMenu({ className, size = "md", label = "Frost", items }: StyledMenuProps) {
  return (
    <MenuShell
      size={size}
      label={label}
      className={className}
      panelClassName={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-border)_70%,transparent)]"
      )}
    >
      {(close) => <MenuList items={items ?? accountItems} size={size} close={close} />}
    </MenuShell>
  )
}

/* Tint: info-toned glass - info is mixed into the transparent popover ground. Depth md (8px): deliberately the same step as Frost - Tint is the coloured version of Frost. The info film takes over the ground, and the supports- variant has to be overridden too. */
export function TintMenu({ className, size = "md", label = "Tint", items }: StyledMenuProps) {
  return (
    <MenuShell
      size={size}
      label={label}
      className={className}
      panelClassName={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-info)_30%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_16%,color-mix(in_oklab,var(--color-popover)_72%,transparent))]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_16%,color-mix(in_oklab,var(--color-popover)_72%,transparent))]"
      )}
    >
      {(close) => <MenuList items={items ?? workspaceItems} size={size} close={close} />}
    </MenuShell>
  )
}

/* Smoke: smoky glass mixed with foreground. Depth lg (16px): smoke should turn what is behind into texture - the scale step closest to the intent of the old 24px. */
export function SmokeMenu({ className, size = "md", label = "Smoke", items }: StyledMenuProps) {
  return (
    <MenuShell
      size={size}
      label={label}
      className={className}
      panelClassName={cn(
        glassDepth.lg,
        "border-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_10%,color-mix(in_oklab,var(--color-popover)_64%,transparent))]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_10%,color-mix(in_oklab,var(--color-popover)_64%,transparent))]"
      )}
    >
      {(close) => <MenuList items={items ?? accountItems} size={size} close={close} />}
    </MenuShell>
  )
}

const crystalItems: StyledMenuItem[] = [
  { label: "New project", icon: <Sparkles /> },
  { label: "Import", icon: <Layers /> },
  { label: "Preferences", icon: <Settings /> },
  { label: "Sign out", icon: <LogOut /> },
]

/* Crystal: the most transparent panel, with the glass edge emphasized by a thin
   bright border + ring. Depth sm (4px): crystal means clarity, not diffusion - its
   character is very low opacity (46% popover) and a sharp edge. The old 40px was
   the opposite of that intent.
   The old shadow-none was REMOVED: it existed to cancel panelBase's shadow-lg,
   which is gone now; had it stayed it would have deleted the signature. The old
   ring-1 was REMOVED too: in v4 a ring compiles to a box-shadow, and glassDepth's
   arbitrary [box-shadow] overrides it - so it was drawing nothing at all
   (measured). The crystal edge now comes from the signature's own top inset
   highlight; that was what was wanted anyway. */
export function CrystalMenu({ className, size = "md", label = "Crystal", items }: StyledMenuProps) {
  return (
    <MenuShell
      size={size}
      label={label}
      className={className}
      panelClassName={cn(
        glassDepth.sm,
        "border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-popover)_46%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_46%,transparent)]"
      )}
    >
      {(close) => <MenuList items={items ?? crystalItems} size={size} close={close} />}
    </MenuShell>
  )
}

/* Depth: layered glass - a gradient from top to bottom, the deepest in the family. Depth xl (24px): the highest diffusion, the panel that detaches most from the page. The old shadow-xl was REMOVED: the same merge group as the signature, and keeping it dropped the signature. The depth is now carried by the signature's ambient shadow plus the top-to-bottom gradient layer (a gradient is a background-IMAGE, a separate merge group, so it does not clash with the signature). */
export function DepthMenu({ className, size = "md", label = "Depth", items }: StyledMenuProps) {
  return (
    <MenuShell
      size={size}
      label={label}
      className={className}
      panelClassName={cn(
        glassDepth.xl,
        "border-[color-mix(in_oklab,var(--color-border)_60%,transparent)]",
        "bg-gradient-to-b from-[color-mix(in_oklab,var(--color-popover)_82%,transparent)] to-[color-mix(in_oklab,var(--color-popover)_52%,transparent)]",
        "ring-1 ring-inset ring-[color-mix(in_oklab,var(--color-background)_30%,transparent)]"
      )}
    >
      {(close) => <MenuList items={items ?? workspaceItems} size={size} close={close} />}
    </MenuShell>
  )
}

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.

Frost

A medium blur over a translucent popover surface.

Tint

A primary-tinted glass panel.

Smoke

A smoky panel with a strong blur.

Crystal

The most transparent panel with a bright thin edge.

Depth

A layered gradient glass with a deep shadow.

ai2 Glass dropdown menus: 5 styled variations on the token system

The ai2 Glass dropdown menus are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-triggered menus with a frosted, translucent panel. 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 fades in.

What is in the ai2 Glass dropdown menus?

5 exports in one file: Frost, Tint, Smoke, Crystal and Depth. 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 fades in.
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 Glass dropdown menus 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.