Are the ai2 Styled dropdown menu 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 dropdown menu

Five dropdown menus: simple, icon, section, checkable and rich. Each is self-contained (no radix), sized, token-driven, opens on click and closes on outside click or Escape.

NavigationDropdown menu

Installation

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

Run the following command

npx shadcn@latest add @ai2/dropdown-menu-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/dropdown-menu-styled.tsx

"use client"

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

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

/* Dropdown family: 5 decorative self-contained menus. Each export is a complete
   dropdown: a relative inline-flex wrapper + a real trigger button + a menu panel
   absolutely positioned BELOW the trigger (top-full mt-1). NO radix or portal. The
   trigger toggles on CLICK; it closes on an outside click (window pointerdown, with
   inner clicks ignored via the wrapper ref), on Escape and when an item is
   selected. 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 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-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"

const panelBase =
  "absolute left-0 top-full z-50 mt-1 origin-top rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg 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-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground 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 },
}

/* Internal open/closed state management: it closes on an outside click + Escape. */
function useMenuState() {
  const [open, setOpen] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!open) 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)
    }
  }, [open])

  return { open, setOpen, wrapperRef }
}

/* Shared shell: a relative wrapper plus a trigger button plus an AnimatePresence menu panel. */
function MenuShell({
  size = "md",
  label = "Options",
  className,
  children,
}: {
  size?: StyledSize
  label?: React.ReactNode
  className?: string
  children: (close: () => void) => React.ReactNode
}) {
  const { open, setOpen, wrapperRef } = useMenuState()
  const reduce = useReducedMotion()

  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
  const active = reduce ? fade : menuMotion

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

      <AnimatePresence>
        {open ? (
          <motion.div
            role="menu"
            data-slot="styled-dropdown-menu-content"
            className={cn(panelBase, panelWidth[size])}
            initial={active.initial}
            animate={active.animate}
            exit={active.exit}
            transition={reduce ? { duration: 0.16 } : menuMotion.transition}
          >
            {children(() => setOpen(false))}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

const simpleItems: StyledMenuItem[] = [
  { label: "Profile" },
  { label: "Billing" },
  { label: "Settings" },
  { label: "Sign out" },
]

/* Simple: sade dikey liste. */
export function SimpleMenu({ className, size = "md", label = "Options", items }: StyledMenuProps) {
  const list = items ?? simpleItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(itemBase, itemHeight[size])}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              {item.label}
            </button>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

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

/* Icon: every item carries a leading token icon. */
export function IconMenu({ className, size = "md", label = "Menu", items }: StyledMenuProps) {
  const list = items ?? iconItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.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>
      )}
    </MenuShell>
  )
}

interface SectionMenuProps extends StyledMenuProps {
  sections?: { heading: React.ReactNode; items: StyledMenuItem[] }[]
}

const sectionData: { heading: React.ReactNode; items: StyledMenuItem[] }[] = [
  {
    heading: "Account",
    items: [
      { label: "Profile", icon: <User /> },
      { label: "Billing", icon: <CreditCard /> },
    ],
  },
  {
    heading: "Preferences",
    items: [
      { label: "Settings", icon: <Settings /> },
      { label: "Notifications", icon: <Bell /> },
    ],
  },
]

/* Section: gruplanmis itemlar, token label header + ayirici. */
export function SectionMenu({
  className,
  size = "md",
  label = "Workspace",
  sections,
}: SectionMenuProps) {
  const groups = sections ?? sectionData
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {groups.map((group, gi) => (
            <div key={`${gi}`} className="flex flex-col">
              {gi > 0 ? (
                <div
                  role="separator"
                  className="my-1.5 h-px bg-[color-mix(in_oklab,var(--color-border)_100%,transparent)]"
                />
              ) : null}
              <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
                {group.heading}
              </div>
              {group.items.map((item, i) => (
                <button
                  key={`${gi}-${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>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

const checkItems: StyledMenuItem[] = [
  { label: "Show sidebar" },
  { label: "Show toolbar" },
  { label: "Show status bar" },
  { label: "Compact mode" },
]

/* Check: checkable items toggle the token check mark; the menu stays open. */
export function CheckMenu({ className, size = "md", label = "View", items }: StyledMenuProps) {
  const list = items ?? checkItems
  const [checked, setChecked] = React.useState<Record<number, boolean>>({ 0: true })

  const toggle = (i: number, item: StyledMenuItem) => {
    setChecked((prev) => ({ ...prev, [i]: !prev[i] }))
    item.onSelect?.()
  }

  return (
    <MenuShell size={size} label={label} className={className}>
      {() => (
        <div className="flex flex-col">
          {list.map((item, i) => {
            const isChecked = !!checked[i]
            return (
              <button
                key={`${i}`}
                type="button"
                role="menuitemcheckbox"
                aria-checked={isChecked}
                tabIndex={0}
                className={cn(itemBase, itemHeight[size])}
                onClick={() => toggle(i, item)}
              >
                <span className="flex size-4 shrink-0 items-center justify-center text-primary">
                  {isChecked ? <Check /> : null}
                </span>
                {item.label}
              </button>
            )
          })}
        </div>
      )}
    </MenuShell>
  )
}

const richItems: StyledMenuItem[] = [
  {
    label: "Free plan",
    icon: <User />,
    description: "Up to 3 projects and basic support.",
  },
  {
    label: "Pro plan",
    icon: <Star />,
    description: "Unlimited projects and priority support.",
  },
  {
    label: "Billing",
    icon: <CreditCard />,
    description: "Manage invoices and payment methods.",
  },
]

/* Rich: every item carries a title plus a small description line. */
export function RichMenu({ className, size = "lg", label = "Plan", items }: StyledMenuProps) {
  const list = items ?? richItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(
                "flex w-full cursor-default select-none items-start gap-3 rounded-md px-3 py-2.5 text-left outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
              )}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              {item.icon ? (
                <span className="mt-0.5 flex shrink-0 items-center text-muted-foreground">
                  {item.icon}
                </span>
              ) : null}
              <span className="flex flex-col gap-0.5">
                <span className="text-sm font-medium text-popover-foreground">{item.label}</span>
                {item.description ? (
                  <span className="text-xs text-muted-foreground">{item.description}</span>
                ) : null}
              </span>
            </button>
          ))}
        </div>
      )}
    </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.

Simple

A clean list of menu items.

Icon

Each item has a leading token icon.

Section

Items grouped under token label headers.

Check

Checkable items that toggle a token check.

Rich

Items with a title and a description line.

ai2 Styled dropdown menu: 5 styled variations on the token system

The ai2 Styled dropdown menu are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-triggered menus. 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 menu 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 menu appears instantly.

What is in the ai2 Styled dropdown menu?

5 exports in one file: Simple, Icon, Section, Check 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 menu in from the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the menu 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 dropdown menu 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.