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

Tone comboboxes

Five comboboxes that share one body and vary only the semantic tone: info, success, warning, danger and muted. The tone drives the border, the focus color, the leading icon, the panel note and the highlighted row. Each is self-contained (no radix, no cmdk), sized, token-driven, and carries data-tone on the root.

ComboboxTone

Installation

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

Run the following command

npx shadcn@latest add @ai2/combobox-tone

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

"use client"

import * as React from "react"
import {
  AlertTriangle,
  Check,
  ChevronsUpDown,
  CircleAlert,
  CircleCheck,
  Info,
  Minus,
  Search,
} from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Tone combobox family: 5 decorative SELF-CONTAINED searchable selects. NO radix,
   NO portal, NO cmdk. The body is the same in every variant; the whole difference
   is the SEMANTIC TONE: info, success, warning, danger and muted. The tone drives
   the border, the focus ring, the leading icon, the panel header and the
   highlight of the selected row. ai2 uses `danger`, NOT `destructive`. Each export
   is a complete combobox: a real <input> carrying role="combobox" filters, the
   arrow keys move the highlight, Enter selects, Escape closes. Color comes ONLY
   from tokens, via alpha color-mix. Every root carries `data-tone`. */

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

type Tone = "info" | "success" | "warning" | "danger" | "muted"

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
}

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" },
]

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 bg-transparent pl-9 pr-9 text-sm text-foreground shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40"

const panelBase =
  "absolute left-0 right-0 top-full z-50 mt-2 min-w-56 origin-top overflow-hidden rounded-xl 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"

const noteBase =
  "flex items-center gap-2 border-b px-3 py-2 text-xs [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const panelMotion = {
  initial: { opacity: 0, scale: 0.98, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.98, y: -6 },
}

interface ToneStyle {
  border: string
  ring: string
  icon: string
  panelBorder: string
  note: string
  noteText: string
  active: string
  note_label: string
}

/* Tone map: every tone carries its own border, ring, icon and note colour. */
const toneStyles: Record<Tone, ToneStyle> = {
  info: {
    border: "border border-[color-mix(in_oklab,var(--color-info)_55%,transparent)]",
    ring: "focus-visible:border-info",
    icon: "text-info",
    panelBorder: "border-[color-mix(in_oklab,var(--color-info)_40%,transparent)]",
    note: "border-[color-mix(in_oklab,var(--color-info)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]",
    noteText: "text-info",
    active: "bg-[color-mix(in_oklab,var(--color-info)_14%,transparent)] text-foreground",
    note_label: "Pick the framework you want docs for.",
  },
  success: {
    border: "border border-[color-mix(in_oklab,var(--color-success)_55%,transparent)]",
    ring: "focus-visible:border-success",
    icon: "text-success",
    panelBorder: "border-[color-mix(in_oklab,var(--color-success)_40%,transparent)]",
    note: "border-[color-mix(in_oklab,var(--color-success)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-success)_10%,transparent)]",
    noteText: "text-success",
    active: "bg-[color-mix(in_oklab,var(--color-success)_14%,transparent)] text-foreground",
    note_label: "Every option here is verified and ready.",
  },
  warning: {
    border: "border border-[color-mix(in_oklab,var(--color-warning)_55%,transparent)]",
    ring: "focus-visible:border-warning",
    icon: "text-warning",
    panelBorder: "border-[color-mix(in_oklab,var(--color-warning)_40%,transparent)]",
    note: "border-[color-mix(in_oklab,var(--color-warning)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-warning)_10%,transparent)]",
    noteText: "text-warning",
    active: "bg-[color-mix(in_oklab,var(--color-warning)_16%,transparent)] text-foreground",
    note_label: "Some options may change on the next release.",
  },
  danger: {
    border: "border border-[color-mix(in_oklab,var(--color-danger)_55%,transparent)]",
    ring: "focus-visible:border-danger",
    icon: "text-danger",
    panelBorder: "border-[color-mix(in_oklab,var(--color-danger)_40%,transparent)]",
    note: "border-[color-mix(in_oklab,var(--color-danger)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-danger)_10%,transparent)]",
    noteText: "text-danger",
    active: "bg-[color-mix(in_oklab,var(--color-danger)_14%,transparent)] text-foreground",
    note_label: "This choice cannot be undone later.",
  },
  muted: {
    border: "border border-border",
    ring: "focus-visible:border-ring",
    icon: "text-muted-foreground",
    panelBorder: "border-border",
    note: "border-border bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]",
    noteText: "text-muted-foreground",
    active: "bg-accent text-accent-foreground",
    note_label: "A quiet, low-emphasis picker.",
  },
}

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]
  )

  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,
    onInputKeyDown,
    wrapperRef,
    inputValue,
    listId,
    optionId,
  }
}

/* Shared shell: toned input plus toned panel plus a toned note row. */
function ToneCombobox({
  props,
  tone,
  toneIcon,
}: {
  props: ComboboxProps
  tone: Tone
  toneIcon: React.ReactNode
}) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useCombobox(props)
  const reduce = useReducedMotion() ?? false
  const t = toneStyles[tone]
  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"
      data-tone={tone}
      className={cn(rootBase, panelWidth[size], className)}
    >
      <div className="relative">
        <span
          className={cn(
            "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 [&_svg]:size-4 [&_i]:text-base [&_i]:leading-none",
            t.icon
          )}
        >
          {toneIcon}
        </span>
        <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], t.border, t.ring)}
        />
        <ChevronsUpDown
          className={cn(
            "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 opacity-70",
            t.icon
          )}
        />
      </div>

      <AnimatePresence>
        {open ? (
          <motion.div
            id={listId}
            role="listbox"
            className={cn(panelBase, t.panelBorder)}
            initial={reduce ? { opacity: 0 } : panelMotion.initial}
            animate={reduce ? { opacity: 1 } : panelMotion.animate}
            exit={reduce ? { opacity: 0 } : panelMotion.exit}
            transition={reduce ? { duration: 0 } : { duration: 0.16, ease: "easeOut" }}
          >
            <div className={cn(noteBase, t.note, t.noteText)}>
              <Search className="shrink-0" />
              <span className="truncate">{t.note_label}</span>
            </div>
            <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) && t.active)}
                    >
                      <span className="flex-1 truncate">{option.label}</span>
                      {isSelected ? <Check className={t.icon} /> : null}
                    </div>
                  )
                })
              )}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* InfoCombobox: info tonu; notlu, bilgilendirici bir secici. */
export function InfoCombobox(props: ComboboxProps) {
  return <ToneCombobox props={props} tone="info" toneIcon={<Info />} />
}

/* SuccessCombobox: a success tone; it reads like a validated field. */
export function SuccessCombobox(props: ComboboxProps) {
  return <ToneCombobox props={props} tone="success" toneIcon={<CircleCheck />} />
}

/* WarningCombobox: warning tonu; dikkat isteyen secim. */
export function WarningCombobox(props: ComboboxProps) {
  return <ToneCombobox props={props} tone="warning" toneIcon={<AlertTriangle />} />
}

/* DangerCombobox: the danger tone (NOT destructive); an irreversible choice. */
export function DangerCombobox(props: ComboboxProps) {
  return <ToneCombobox props={props} tone="danger" toneIcon={<CircleAlert />} />
}

/* MutedCombobox: notr, dusuk vurgulu ton. */
export function MutedCombobox(props: ComboboxProps) {
  return <ToneCombobox props={props} tone="muted" toneIcon={<Minus />} />
}

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.

Info

An informative picker with an info-toned note.

Success

Reads as a verified, already valid field.

Warning

Flags a choice that needs attention.

Danger

Marks a choice that cannot be undone.

Muted

A quiet, low-emphasis neutral picker.

ai2 Tone comboboxes: 5 styled variations on the token system

The ai2 Tone comboboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around searchable selects in the ai2 semantic tones. 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 option panel in from the input. 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 Tone comboboxes?

5 exports in one file: Info, Success, Warning, Danger and Muted. 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 option panel in from the input.
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 Tone 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.