Are the ai2 Motion comboboxes 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 comboboxes

Five comboboxes with an identical body that differ only in how the option panel opens and closes: a slide, a pop, a fade, a spring and a vertical morph. Each is self-contained (no radix, no cmdk), sized, token-driven, filters as you type and supports arrow keys plus Enter.

ComboboxMotion

Installation

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

Run the following command

npx shadcn@latest add @ai2/combobox-motion

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/combobox-motion.tsx

"use client"

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

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

/* Motion combobox family: 5 decorative SELF-CONTAINED searchable selects. NO
   radix, NO portal, NO cmdk. The body stays the same in every variant; the whole
   difference is in the PANEL's open / close motion. Each export is a complete
   combobox: a real <input> carrying role="combobox" filters, the arrow keys move
   the highlight, Enter selects, Escape closes. Controlled (value/onValueChange) +
   uncontrolled (defaultValue). Color comes ONLY from tokens, via alpha color-mix.
   The motion is disabled through useReducedMotion. */

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

const triggerHeight: Record<StyledSize, string> = {
  sm: "h-8",
  md: "h-9",
  lg: "h-10",
  xl: "h-12",
}

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

export interface ComboboxOption {
  value: string
  label: React.ReactNode
}

interface ComboboxProps {
  className?: string
  size?: StyledSize
  placeholder?: string
  options?: ComboboxOption[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
}

/* Varsayilan 6 secenek: prop'suz render eder. */
const defaultOptions: ComboboxOption[] = [
  { value: "next", label: "Next.js" },
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
  { value: "solid", label: "Solid" },
  { value: "astro", label: "Astro" },
]

/* The label can be a ReactNode; flatten it to plain text for filtering. */
function nodeText(node: React.ReactNode): string {
  if (node === null || node === undefined || typeof node === "boolean") return ""
  if (typeof node === "string" || typeof node === "number") return String(node)
  if (Array.isArray(node)) return node.map(nodeText).join("")
  if (React.isValidElement(node)) {
    return nodeText((node.props as { children?: React.ReactNode }).children)
  }
  return ""
}

function filterOptions(options: ComboboxOption[], query: string): ComboboxOption[] {
  const q = query.trim().toLowerCase()
  if (q.length === 0) return options
  return options.filter((o) => nodeText(o.label).toLowerCase().includes(q))
}

const rootBase = "relative"

const inputBase =
  "w-full rounded-lg border border-field-border bg-transparent pl-9 pr-9 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 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40"

/* The panel carries a min-w so it does not get squeezed in a narrow container. */
const panelBase =
  "absolute left-0 right-0 top-full z-50 mt-2 min-w-56 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none"

const listBase = "max-h-60 overflow-y-auto p-1.5"

const optionBase =
  "flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const emptyBase = "py-6 text-center text-sm text-muted-foreground"

/* Ortak durum: input trigger + filtre + vurgu + klavye + disari tiklama. */
function useCombobox(props: ComboboxProps) {
  const { options = defaultOptions, value, defaultValue, onValueChange } = props
  const isControlled = value !== undefined
  const [internal, setInternal] = React.useState<string | undefined>(defaultValue)
  const current = isControlled ? value : internal

  const [open, setOpen] = React.useState(false)
  const [editing, setEditing] = React.useState(false)
  const [query, setQuery] = React.useState("")
  const [active, setActive] = React.useState(0)

  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const uid = React.useId()
  const listId = `${uid}-list`
  const optionId = React.useCallback((i: number) => `${uid}-option-${i}`, [uid])

  const selected = React.useMemo(
    () => (current === undefined ? undefined : options.find((o) => o.value === current)),
    [options, current]
  )

  /* Filter while typing; show the full list only on focus. */
  const filtered = React.useMemo(
    () => (editing ? filterOptions(options, query) : options),
    [editing, options, query]
  )

  React.useEffect(() => {
    setActive((prev) => (prev >= filtered.length ? 0 : prev))
  }, [filtered.length])

  const close = React.useCallback(() => {
    setOpen(false)
    setEditing(false)
    setQuery("")
    setActive(0)
  }, [])

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

  const commit = React.useCallback(
    (next: string) => {
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
      close()
    },
    [isControlled, onValueChange, close]
  )

  const onInputKeyDown = React.useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === "ArrowDown") {
        e.preventDefault()
        setOpen(true)
        setActive((prev) => (filtered.length === 0 ? 0 : (prev + 1) % filtered.length))
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        setOpen(true)
        setActive((prev) =>
          filtered.length === 0 ? 0 : (prev - 1 + filtered.length) % filtered.length
        )
      } else if (e.key === "Enter") {
        e.preventDefault()
        const item = filtered[active]
        if (item) commit(item.value)
      } else if (e.key === "Escape") {
        e.preventDefault()
        close()
      }
    },
    [filtered, active, commit, close]
  )

  const inputValue = editing ? query : selected ? nodeText(selected.label) : ""

  return {
    open,
    setOpen,
    setEditing,
    setQuery,
    active,
    setActive,
    filtered,
    current,
    commit,
    close,
    onInputKeyDown,
    wrapperRef,
    inputValue,
    listId,
    optionId,
  }
}

interface PanelMotion {
  initial: Record<string, number>
  animate: Record<string, number>
  exit: Record<string, number>
  transition: Record<string, unknown>
  className?: string
}

/* Shared shell: input plus an AnimatePresence panel. panelMotion carries each variant's opening flavour; a plain fade under reduced motion. */
function MotionCombobox({
  props,
  panelMotion,
}: {
  props: ComboboxProps
  panelMotion: PanelMotion
}) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useCombobox(props)
  const reduce = useReducedMotion() ?? false
  const {
    open,
    setOpen,
    setEditing,
    setQuery,
    active,
    setActive,
    filtered,
    current,
    commit,
    onInputKeyDown,
    wrapperRef,
    inputValue,
    listId,
    optionId,
  } = state

  const activeId = open && filtered[active] ? optionId(active) : undefined

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-combobox"
      className={cn(rootBase, panelWidth[size], className)}
    >
      <div className="relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
        <input
          role="combobox"
          aria-expanded={open}
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={activeId}
          value={inputValue}
          placeholder={placeholder}
          onFocus={() => {
            setOpen(true)
            setEditing(false)
          }}
          onChange={(e) => {
            setOpen(true)
            setEditing(true)
            setQuery(e.target.value)
          }}
          onKeyDown={onInputKeyDown}
          className={cn(inputBase, triggerHeight[size])}
        />
        <ChevronsUpDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground opacity-70" />
      </div>

      <AnimatePresence>
        {open ? (
          <motion.div
            id={listId}
            role="listbox"
            className={cn(panelBase, panelMotion.className)}
            initial={reduce ? { opacity: 0 } : panelMotion.initial}
            animate={reduce ? { opacity: 1 } : panelMotion.animate}
            exit={reduce ? { opacity: 0 } : panelMotion.exit}
            transition={reduce ? { duration: 0 } : panelMotion.transition}
          >
            <div className={listBase}>
              {filtered.length === 0 ? (
                <p className={emptyBase}>No results found.</p>
              ) : (
                filtered.map((option, i) => {
                  const isActive = i === active
                  const isSelected = option.value === current
                  return (
                    <div
                      key={option.value}
                      id={optionId(i)}
                      role="option"
                      tabIndex={-1}
                      aria-selected={isSelected}
                      onMouseEnter={() => setActive(i)}
                      onClick={() => commit(option.value)}
                      className={cn(
                        optionBase,
                        (isActive || isSelected) && "bg-accent text-accent-foreground"
                      )}
                    >
                      <span className="flex-1 truncate">{option.label}</span>
                      {isSelected ? <Check className="text-foreground" /> : null}
                    </div>
                  )
                })
              )}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* SlideCombobox: panel yukaridan asagi kayarak girer. */
export function SlideCombobox(props: ComboboxProps) {
  return (
    <MotionCombobox
      props={props}
      panelMotion={{
        initial: { opacity: 0, y: -10 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -10 },
        transition: { duration: 0.18, ease: "easeOut" },
      }}
    />
  )
}

/* PopCombobox: it "pops" by growing from small and leans over the trigger. */
export function PopCombobox(props: ComboboxProps) {
  return (
    <MotionCombobox
      props={props}
      panelMotion={{
        className: "origin-top",
        initial: { opacity: 0, scale: 0.9 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.9 },
        transition: { duration: 0.16, ease: "easeOut" },
      }}
    />
  )
}

/* FadeCombobox: opacity only; no movement, a calm transition. */
export function FadeCombobox(props: ComboboxProps) {
  return (
    <MotionCombobox
      props={props}
      panelMotion={{
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
        transition: { duration: 0.22, ease: "easeInOut" },
      }}
    />
  )
}

/* SpringCombobox: yayli, hafif zipli giris. */
export function SpringCombobox(props: ComboboxProps) {
  return (
    <MotionCombobox
      props={props}
      panelMotion={{
        className: "origin-top",
        initial: { opacity: 0, y: -14, scale: 0.96 },
        animate: { opacity: 1, y: 0, scale: 1 },
        exit: { opacity: 0, y: -8, scale: 0.98 },
        transition: { type: "spring" as const, stiffness: 420, damping: 26, mass: 0.7 },
      }}
    />
  )
}

/* MorphCombobox: it grows with scaleY like a curtain opening vertically. */
export function MorphCombobox(props: ComboboxProps) {
  return (
    <MotionCombobox
      props={props}
      panelMotion={{
        className: "origin-top",
        initial: { opacity: 0, scaleY: 0.6, scaleX: 0.98 },
        animate: { opacity: 1, scaleY: 1, scaleX: 1 },
        exit: { opacity: 0, scaleY: 0.6, scaleX: 0.98 },
        transition: { duration: 0.2, ease: "easeOut" },
      }}
    />
  )
}

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.

Slide

The panel slides down from the input.

Pop

The panel scales up from the trigger edge.

Fade

Opacity only, for a calm transition.

Spring

A springy entrance with a slight overshoot.

Morph

The panel unrolls vertically like a blind.

ai2 Motion comboboxes: 5 styled variations on the token system

The ai2 Motion comboboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around searchable selects that vary the panel open and close motion. 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 the option panel in and out of 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 transforms are skipped and the panel fades or appears instantly.

What is in the ai2 Motion comboboxes?

5 exports in one file: Slide, Pop, Fade, Spring and Morph. 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 the option panel in and out of the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the panel fades or 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 Motion comboboxes 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.