Are the ai2 Rich toasters 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 slide is skipped and the toast fades in place.

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.

Rich toasters

Five toast triggers that carry more than one line: a titled toast, an avatar toast, a media thumbnail toast, a long description with an action button and a grouped stack with a count badge. Each is self-contained (no sonner package), sized, token-driven, and auto-dismisses.

SonnerRich

Installation

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

Run the following command

npx shadcn@latest add @ai2/sonner-rich

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/sonner-rich.tsx

"use client"

import * as React from "react"
import { AlertTriangle, CheckCircle, ImageIcon, Info, X } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Styled sonner - rich family: 5 self-contained toasters. NO sonner package and NO
   portal - each export renders a demo trigger button; clicking it pushes a toast
   onto a LOCAL stack (a useState array), and it appears in the bottom-right corner
   (fixed bottom-right, z-50). The difference: richer content - a title, an avatar, a
   media thumbnail, a long description and a grouped list. Multiple toasts stack on
   top of each other and disappear on a timeout or via the close button. Color comes
   ONLY from tokens, via alpha color-mix. Deterministic: the ids come from a ref
   counter (NO Date.now/Math.random) and the timeout is fixed. */

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

export type StyledTone = "success" | "info" | "warning" | "danger"

/* Toast genisligi size'a bagli. Zengin icerik biraz daha genis taban ister. */
const toastWidth: Record<StyledSize, string> = {
  sm: "w-64",
  md: "w-72",
  lg: "w-80",
  xl: "w-96",
}

/* Tone -> ikon rengi (semantic token). */
const toneIconColor: Record<StyledTone, string> = {
  success: "text-success",
  info: "text-info",
  warning: "text-warning-soft-foreground",
  danger: "text-danger",
}

/* Tone -> ikon bileseni. */
const toneIcon: Record<StyledTone, React.ComponentType<{ className?: string }>> = {
  success: CheckCircle,
  info: Info,
  warning: AlertTriangle,
  danger: X,
}

/* Tone -> yumusak yuzey (soft token cifti). */
const toneSoft: Record<StyledTone, string> = {
  success: "bg-success-soft text-success-soft-foreground",
  info: "bg-info-soft text-info-soft-foreground",
  warning: "bg-warning-soft text-warning-soft-foreground",
  danger: "bg-danger-soft text-danger-soft-foreground",
}

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 closeBtn =
  "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const toastBase =
  "pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const stackClass =
  "pointer-events-none fixed bottom-0 right-0 z-50 flex flex-col items-end gap-2 p-4"

/* The auto-dismiss duration (fixed, deterministic). Rich content stays longer. */
const TOAST_MS = 6000

/* A slide+fade enter/exit; instant under reduced-motion (opacity only). */
function toastMotion(reduce: boolean | null) {
  if (reduce) {
    return {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      transition: { duration: 0.12 },
    }
  }
  return {
    initial: { opacity: 0, x: 32, scale: 0.96 },
    animate: { opacity: 1, x: 0, scale: 1 },
    exit: { opacity: 0, x: 32, scale: 0.96 },
    transition: { type: "spring" as const, stiffness: 320, damping: 28 },
  }
}

interface ToastItem {
  id: number
}

/* Shared stack logic: ref-counted id, fixed timeout, every timer cleared on
   unmount (no setState-after-unmount). */
function useToastStack() {
  const [items, setItems] = React.useState<ToastItem[]>([])
  const counter = React.useRef(0)
  const timers = React.useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map())

  const dismiss = React.useCallback((id: number) => {
    setItems((prev) => prev.filter((t) => t.id !== id))
    const timer = timers.current.get(id)
    if (timer) {
      clearTimeout(timer)
      timers.current.delete(id)
    }
  }, [])

  const push = React.useCallback(() => {
    const id = counter.current++
    setItems((prev) => [...prev, { id }])
    const timer = setTimeout(() => dismiss(id), TOAST_MS)
    timers.current.set(id, timer)
  }, [dismiss])

  React.useEffect(() => {
    const map = timers.current
    return () => {
      map.forEach((t) => clearTimeout(t))
      map.clear()
    }
  }, [])

  return { items, push, dismiss }
}

interface RichToasterProps {
  className?: string
  size?: StyledSize
  tone?: StyledTone
  label?: React.ReactNode
}

/* Single body: the content rendering is variant-specific. */
function RichShell({
  className,
  size,
  tone,
  label,
  bodyClass,
  children,
}: Required<Pick<RichToasterProps, "size" | "tone">> & {
  className?: string
  label?: React.ReactNode
  bodyClass?: string
  children: (item: ToastItem, dismiss: (id: number) => void) => React.ReactNode
}) {
  const reduce = useReducedMotion()
  const { items, push, dismiss } = useToastStack()
  const m = toastMotion(reduce)

  return (
    <div data-slot="styled-sonner" className={cn("inline-flex", className)}>
      <button type="button" className={triggerBtn} onClick={push}>
        {label}
      </button>
      <div className={stackClass}>
        <AnimatePresence initial={false}>
          {items.map((t) => (
            <motion.div
              key={t.id}
              role="status"
              data-tone={tone}
              className={cn(toastBase, toastWidth[size], bodyClass)}
              initial={m.initial}
              animate={m.animate}
              exit={m.exit}
              transition={m.transition}
              layout={!reduce}
            >
              {children(t, dismiss)}
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  )
}

/* Sag ustte duran kapat butonu (icerik kolonu pr-6 ile yer acar). */
function CornerClose({ onClick }: { onClick: () => void }) {
  return (
    <button
      type="button"
      aria-label="Dismiss"
      className={cn(closeBtn, "absolute right-2 top-2")}
      onClick={onClick}
    >
      <X />
    </button>
  )
}

/* ---------------------------------------------------------------- TitleToaster A tone icon plus a bold title plus a one-line message. */
export function TitleToaster({
  className,
  size = "md",
  tone = "info",
  label = "Show toast",
}: RichToasterProps) {
  const Icon = toneIcon[tone]
  return (
    <RichShell className={className} size={size} tone={tone} label={label}>
      {(t, dismiss) => (
        <>
          <Icon className={cn("mt-0.5", toneIconColor[tone])} />
          <div className="min-w-0 flex-1 pr-6">
            <div className="font-medium tracking-tight text-foreground">Deployment ready</div>
            <div className="mt-0.5 text-muted-foreground">Your preview is live.</div>
          </div>
          <CornerClose onClick={() => dismiss(t.id)} />
        </>
      )}
    </RichShell>
  )
}

/* --------------------------------------------------------------- AvatarToaster
   Bas harf avatari + kisi adi + mesaj. */
export function AvatarToaster({
  className,
  size = "md",
  tone = "info",
  label = "Show toast",
}: RichToasterProps) {
  return (
    <RichShell className={className} size={size} tone={tone} label={label}>
      {(t, dismiss) => (
        <>
          <span
            aria-hidden
            className={cn(
              "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium",
              toneSoft[tone]
            )}
          >
            AK
          </span>
          <div className="min-w-0 flex-1 pr-6">
            <div className="font-medium tracking-tight text-foreground">Ada Kern</div>
            <div className="mt-0.5 truncate text-muted-foreground">
              Left a comment on your pull request.
            </div>
          </div>
          <CornerClose onClick={() => dismiss(t.id)} />
        </>
      )}
    </RichShell>
  )
}

/* ---------------------------------------------------------------- MediaToaster
   Kare medya kucuk resmi + baslik + dosya bilgisi. */
export function MediaToaster({
  className,
  size = "md",
  tone = "info",
  label = "Show toast",
}: RichToasterProps) {
  return (
    <RichShell className={className} size={size} tone={tone} label={label}>
      {(t, dismiss) => (
        <>
          <span
            aria-hidden
            className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground"
          >
            <ImageIcon />
          </span>
          <div className="min-w-0 flex-1 pr-6">
            <div className="truncate font-medium tracking-tight text-foreground">
              cover-art.png
            </div>
            <div className="mt-0.5 text-muted-foreground">1.4 MB uploaded</div>
          </div>
          <CornerClose onClick={() => dismiss(t.id)} />
        </>
      )}
    </RichShell>
  )
}

/* ---------------------------------------------------- DescriptionToaster
   Baslik + uzun aciklama + meta satiri + aksiyon butonu. */
export function DescriptionToaster({
  className,
  size = "md",
  tone = "info",
  label = "Show toast",
}: RichToasterProps) {
  const Icon = toneIcon[tone]
  return (
    <RichShell
      className={className}
      size={size}
      tone={tone}
      label={label}
      bodyClass="flex-col items-stretch"
    >
      {(t, dismiss) => (
        <>
          <CornerClose onClick={() => dismiss(t.id)} />
          <div className="flex items-start gap-3 pr-6">
            <Icon className={cn("mt-0.5", toneIconColor[tone])} />
            <div className="min-w-0 flex-1">
              <div className="font-medium tracking-tight text-foreground">Backup finished</div>
              <p className="mt-1 text-muted-foreground">
                All 248 files were copied to the archive bucket. Older snapshots are pruned
                automatically after thirty days.
              </p>
              <div className="mt-2 text-xs text-muted-foreground">Just now - archive-eu-1</div>
            </div>
          </div>
          <div className="mt-3 flex justify-end">
            <button
              type="button"
              className="inline-flex h-8 select-none items-center justify-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-primary)_88%,var(--color-foreground))] focus-visible:ring-[3px] focus-visible:ring-ring/50"
              onClick={() => dismiss(t.id)}
            >
              View log
            </button>
          </div>
        </>
      )}
    </RichShell>
  )
}

/* -------------------------------------------------------------- StackedToaster
   Gruplanmis bildirim: sayac rozeti + kisa liste. */
const stackedRows = ["Ada Kern approved the design", "Bruno Salt requested changes"]

export function StackedToaster({
  className,
  size = "md",
  tone = "info",
  label = "Show toast",
}: RichToasterProps) {
  return (
    <RichShell
      className={className}
      size={size}
      tone={tone}
      label={label}
      bodyClass="flex-col items-stretch"
    >
      {(t, dismiss) => (
        <>
          <CornerClose onClick={() => dismiss(t.id)} />
          <div className="flex items-center gap-2 pr-6">
            <span
              aria-hidden
              className={cn(
                "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums",
                toneSoft[tone]
              )}
            >
              2
            </span>
            <div className="font-medium tracking-tight text-foreground">New review activity</div>
          </div>
          <ul className="mt-2 space-y-1">
            {stackedRows.map((row) => (
              <li
                key={row}
                className="flex items-center gap-2 rounded-md bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)] px-2 py-1 text-muted-foreground"
              >
                <span
                  aria-hidden
                  className={cn("inline-block size-1.5 shrink-0 rounded-full", toneIconColor[tone])}
                  style={{ backgroundColor: "currentColor" }}
                />
                <span className="min-w-0 truncate">{row}</span>
              </li>
            ))}
          </ul>
        </>
      )}
    </RichShell>
  )
}

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.

Title

A tone icon with a bold title and one supporting line.

Avatar

An initials avatar with a person name and their action.

Media

A square media thumbnail with a file name and size.

Description

A title, a longer paragraph, a meta line and an action button.

Stacked

A grouped notification with a count badge and a short list.

ai2 Rich toasters: 5 styled variations on the token system

The ai2 Rich toasters are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around toast triggers with richer, multi-line content. 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 slides each toast in from the right and stacks the rest. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the slide is skipped and the toast fades in place.

What is in the ai2 Rich toasters?

5 exports in one file: Title, Avatar, Media, Description and Stacked. 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 slides each toast in from the right and stacks the rest.
Reduced-motion aware: Under prefers-reduced-motion, the slide is skipped and the toast fades in place.
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 Rich toasters 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.