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

Five selects that carry a semantic tone through the trigger border, the focus ring, the panel edge and the selected mark: info, success, warning, danger and muted. Styled is a separate layer, so this tone set is wider than the base select's status tones. Each is self-contained (no radix, no native select), sized, token-driven, and closes on outside click or Escape.

SelectTone

Installation

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

Run the following command

npx shadcn@latest add @ai2/select-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/select-tone.tsx

"use client"

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

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

/* Tone select family: 5 self-contained single-selects, each carrying a semantic
   tone (info, success, warning, danger, muted). This is a STYLED component, so it
   is not limited to the STATUS tone set of the base text controls
   (neutral/success/danger); as a separate component it uses its own tone set. The
   tone reaches the trigger frame, the focus ring, the panel edge and the selected
   marker. The root element carries data-tone. NO radix, NO portal. Color comes ONLY
   from tokens, via alpha color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"
export type StyledTone = "info" | "success" | "warning" | "danger" | "muted"

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

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

export interface StyledSelectOption {
  value: string
  label: string
}

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

const defaultOptions: StyledSelectOption[] = [
  { value: "queued", label: "Queued" },
  { value: "running", label: "Running" },
  { value: "passed", label: "Passed" },
  { value: "failed", label: "Failed" },
]

const triggerBase =
  "inline-flex w-full shrink-0 select-none items-center justify-between gap-2 whitespace-nowrap rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const panelBase =
  "absolute left-0 top-full z-50 mt-1 max-h-72 min-w-48 origin-top overflow-auto rounded-xl border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg outline-none"

const optionBase =
  "flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm text-popover-foreground 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 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" as const, stiffness: 340, damping: 26 },
}

interface ToneStyle {
  trigger: string
  ring: string
  panel: string
  option: string
  accent: string
  icon: React.ReactNode
}

const toneStyles: Record<StyledTone, ToneStyle> = {
  info: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-info)_45%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)] text-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_18%,transparent)]",
    ring: "focus-visible:ring-info/40",
    panel: "border-[color-mix(in_oklab,var(--color-info)_40%,transparent)]",
    option: "hover:bg-[color-mix(in_oklab,var(--color-info)_14%,transparent)]",
    accent: "text-info",
    icon: <Info />,
  },
  success: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-success)_45%,transparent)] bg-[color-mix(in_oklab,var(--color-success)_10%,transparent)] text-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_18%,transparent)]",
    ring: "focus-visible:ring-success/40",
    panel: "border-[color-mix(in_oklab,var(--color-success)_40%,transparent)]",
    option: "hover:bg-[color-mix(in_oklab,var(--color-success)_14%,transparent)]",
    accent: "text-success",
    icon: <CircleCheck />,
  },
  warning: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-warning)_50%,transparent)] bg-[color-mix(in_oklab,var(--color-warning)_12%,transparent)] text-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_20%,transparent)]",
    ring: "focus-visible:ring-warning/40",
    panel: "border-[color-mix(in_oklab,var(--color-warning)_45%,transparent)]",
    option: "hover:bg-[color-mix(in_oklab,var(--color-warning)_16%,transparent)]",
    accent: "text-warning",
    icon: <AlertTriangle />,
  },
  danger: {
    trigger:
      "border-[color-mix(in_oklab,var(--color-danger)_45%,transparent)] bg-[color-mix(in_oklab,var(--color-danger)_10%,transparent)] text-foreground hover:bg-[color-mix(in_oklab,var(--color-danger)_18%,transparent)]",
    ring: "focus-visible:ring-danger/40",
    panel: "border-[color-mix(in_oklab,var(--color-danger)_40%,transparent)]",
    option: "hover:bg-[color-mix(in_oklab,var(--color-danger)_14%,transparent)]",
    accent: "text-danger",
    icon: <CircleAlert />,
  },
  muted: {
    trigger: "border-field-border bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
    ring: "focus-visible:ring-ring/50",
    panel: "border-border",
    option: "hover:bg-accent hover:text-accent-foreground",
    accent: "text-muted-foreground",
    icon: <Minus />,
  },
}

function BaseToneSelect({
  className,
  size = "md",
  placeholder = "Select...",
  options,
  value,
  defaultValue,
  onValueChange,
  tone,
}: StyledSelectProps & { tone: StyledTone }) {
  const list = options ?? defaultOptions
  const style = toneStyles[tone]
  const reduce = useReducedMotion()
  const uid = React.useId()
  const listId = `${uid}-listbox`
  const optionId = (i: number) => `${uid}-option-${i}`

  const [open, setOpen] = React.useState(false)
  const [active, setActive] = React.useState(0)
  const [internal, setInternal] = React.useState<string | undefined>(defaultValue)
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  const isControlled = value !== undefined
  const current = isControlled ? value : internal
  const selectedLabel = list.find((o) => o.value === current)?.label

  const close = React.useCallback(() => {
    setOpen(false)
    triggerRef.current?.focus()
  }, [])

  const select = React.useCallback(
    (next: string) => {
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
      setOpen(false)
      triggerRef.current?.focus()
    },
    [isControlled, onValueChange],
  )

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

  const indexOfCurrent = () => {
    const i = list.findIndex((o) => o.value === current)
    return i < 0 ? 0 : i
  }

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      if (!open) return
      e.preventDefault()
      close()
      return
    }
    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
      e.preventDefault()
      if (!open) {
        setOpen(true)
        setActive(indexOfCurrent())
        return
      }
      const dir = e.key === "ArrowDown" ? 1 : -1
      setActive((i) => (i + dir + list.length) % list.length)
      return
    }
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault()
      if (!open) {
        setOpen(true)
        setActive(indexOfCurrent())
        return
      }
      const opt = list[active]
      if (opt) select(opt.value)
    }
  }

  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
  const anim = reduce ? fade : panelMotion

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-select"
      data-tone={tone}
      className={cn("relative inline-flex w-56 max-w-full", panelWidth[size], className)}
    >
      <button
        ref={triggerRef}
        type="button"
        data-slot="styled-select-trigger"
        role="combobox"
        aria-expanded={open}
        aria-haspopup="listbox"
        aria-controls={listId}
        aria-activedescendant={open ? optionId(active) : undefined}
        className={cn(triggerBase, triggerHeight[size], style.trigger, style.ring)}
        onClick={() => {
          setActive(indexOfCurrent())
          setOpen(!open)
        }}
        onKeyDown={onKeyDown}
      >
        <span className="flex min-w-0 items-center gap-2">
          <span className={cn("flex shrink-0 items-center", style.accent)}>{style.icon}</span>
          <span className={cn("truncate", selectedLabel === undefined && "text-muted-foreground")}>
            {selectedLabel ?? placeholder}
          </span>
        </span>
        <ChevronDown
          className={cn("shrink-0 opacity-70 transition-transform duration-200", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open ? (
          <motion.div
            id={listId}
            role="listbox"
            data-slot="styled-select-content"
            className={cn(panelBase, panelWidth[size], style.panel)}
            initial={anim.initial}
            animate={anim.animate}
            exit={anim.exit}
            transition={reduce ? { duration: 0.14 } : panelMotion.transition}
          >
            <div className="flex flex-col">
              {list.map((option, i) => {
                const isSelected = option.value === current
                return (
                  <button
                    key={option.value}
                    id={optionId(i)}
                    type="button"
                    role="option"
                    tabIndex={-1}
                    aria-selected={isSelected}
                    className={cn(optionBase, style.option, style.ring, i === active && "bg-accent text-accent-foreground")}
                    onPointerEnter={() => setActive(i)}
                    onClick={() => select(option.value)}
                  >
                    <span className={cn("flex size-4 shrink-0 items-center justify-center", style.accent)}>
                      {isSelected ? <Check /> : null}
                    </span>
                    <span className="truncate">{option.label}</span>
                  </button>
                )
              })}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* Info: bilgilendirici mavi ton. */
export function InfoSelect(props: StyledSelectProps) {
  return <BaseToneSelect {...props} tone="info" />
}

/* Success: olumlu/onaylanmis ton. */
export function SuccessSelect(props: StyledSelectProps) {
  return <BaseToneSelect {...props} tone="success" />
}

/* Warning: dikkat isteyen ton. */
export function WarningSelect(props: StyledSelectProps) {
  return <BaseToneSelect {...props} tone="warning" />
}

/* Danger: yikici/riskli secim tonu. */
export function DangerSelect(props: StyledSelectProps) {
  return <BaseToneSelect {...props} tone="danger" />
}

/* Muted: sessiz, ikincil ton. */
export function MutedSelect(props: StyledSelectProps) {
  return <BaseToneSelect {...props} tone="muted" />
}

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 informational tone on the border and mark.

Success

A positive, confirmed tone.

Warning

A tone that asks for attention.

Danger

A destructive or risky tone.

Muted

A quiet, secondary tone.

ai2 Tone selects: 5 styled variations on the token system

The ai2 Tone selects are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around single-choice selects that carry a semantic tone. 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 Tone selects?

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 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 Tone selects 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.