Are the ai2 Tone calendars 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 color transitions are dropped.

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 calendars

One month grid in five semantic tones: info, success, warning, danger and muted. The tone drives the header, the weekday row, the hover fill and the selected day, every color coming from ai2 tokens. Each root carries data-tone, is self-contained (no date library), and starts from a fixed month so the output stays deterministic.

CalendarTone

Installation

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

Run the following command

npx shadcn@latest add @ai2/calendar-tone

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

Install dependencies

npm install lucide-react

Copy the source

components/ui/calendar-tone.tsx

"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

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

/* Tone calendar family: the same month grid in 5 semantic tones (info, success, warning, danger, muted). Determinism: the visible month derives from a FIXED constant (January 2026), NOT from the clock. Colour comes ONLY from semantic tokens; alpha through the Tailwind slash modifier or color-mix. Every root carries data-tone. */

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

const MONTHS = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
] as const

const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] as const

const FIXED_MONTH = new Date(2026, 0, 1)

function startOfMonth(d: Date) {
  return new Date(d.getFullYear(), d.getMonth(), 1)
}

function addMonths(d: Date, n: number) {
  return new Date(d.getFullYear(), d.getMonth() + n, 1)
}

function isSameDay(a: Date | null | undefined, b: Date | null | undefined) {
  return (
    !!a &&
    !!b &&
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  )
}

function buildMonthGrid(month: Date): Date[] {
  const first = startOfMonth(month)
  const offset = (first.getDay() + 6) % 7
  const start = new Date(first)
  start.setDate(first.getDate() - offset)
  const days: Date[] = []
  for (let i = 0; i < 42; i++) {
    const d = new Date(start)
    d.setDate(start.getDate() + i)
    days.push(d)
  }
  return days
}

function toWeeks(days: Date[]): Date[][] {
  const weeks: Date[][] = []
  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7))
  return weeks
}

function ariaLabel(d: Date) {
  return `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
}

function useVisibleMonth(defaultMonth?: Date) {
  const [visible, setVisible] = React.useState<Date>(() =>
    startOfMonth(defaultMonth ?? FIXED_MONTH)
  )
  const goPrev = React.useCallback(() => setVisible((m) => addMonths(m, -1)), [])
  const goNext = React.useCallback(() => setVisible((m) => addMonths(m, 1)), [])
  return { visible, goPrev, goNext }
}

function useSelected(defaultValue?: Date, onSelect?: (d: Date) => void) {
  const [selected, setSelected] = React.useState<Date | undefined>(defaultValue)
  const select = React.useCallback(
    (d: Date) => {
      setSelected(d)
      onSelect?.(d)
    },
    [onSelect]
  )
  return { selected, select }
}

const cellSizes: Record<StyledSize, string> = {
  sm: "size-8 text-xs",
  md: "size-9 text-sm",
  lg: "size-10 text-sm",
  xl: "size-11 text-base",
}

const dayBase =
  "relative inline-flex items-center justify-center rounded-md font-normal tabular-nums outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none"

const navBase =
  "inline-flex size-7 items-center justify-center rounded-md 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"

interface ToneSpec {
  /** data-tone degeri. */
  tone: string
  /** Kok yuzey (kenarlik + hafif tonlu zemin). */
  root: string
  /** Baslik metni. */
  title: string
  /** Prev/next butonlari. */
  nav: string
  /** Hafta basliklari. */
  weekday: string
  /** Secilmemis gun. */
  day: string
  /** Secili gun. */
  selected: string
  /** Ay disi gunler. */
  outside: string
}

export interface ToneCalendarProps {
  className?: string
  size?: StyledSize
  defaultMonth?: Date
  defaultValue?: Date
  onSelect?: (d: Date) => void
}

/* The shared body; there is no difference other than ToneSpec. */
function ToneCalendarBase({ spec, props }: { spec: ToneSpec; props: ToneCalendarProps }) {
  const { className, size = "md", defaultMonth, defaultValue, onSelect } = props
  const { visible, goPrev, goNext } = useVisibleMonth(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const weeks = toWeeks(buildMonthGrid(visible))

  return (
    <div
      data-slot="styled-calendar"
      data-tone={spec.tone}
      role="grid"
      aria-labelledby={titleId}
      className={cn("inline-block rounded-xl border p-3", spec.root, className)}
    >
      <div className="mb-2 flex items-center justify-between gap-2 px-1">
        <button
          type="button"
          onClick={goPrev}
          aria-label="Previous month"
          className={cn(navBase, spec.nav)}
        >
          <ChevronLeft />
        </button>
        <div id={titleId} aria-live="polite" className={cn("text-sm font-medium", spec.title)}>
          {MONTHS[visible.getMonth()]} {visible.getFullYear()}
        </div>
        <button
          type="button"
          onClick={goNext}
          aria-label="Next month"
          className={cn(navBase, spec.nav)}
        >
          <ChevronRight />
        </button>
      </div>
      <div role="row" className="grid grid-cols-7 gap-1">
        {WEEKDAYS.map((w) => (
          <div
            key={w}
            role="columnheader"
            className={cn("flex items-center justify-center py-1 text-xs font-medium", spec.weekday)}
          >
            {w}
          </div>
        ))}
      </div>
      {weeks.map((week) => (
        <div key={week[0].toISOString()} role="row" className="grid grid-cols-7 gap-1">
          {week.map((d) => {
            const outside = d.getMonth() !== visible.getMonth()
            const isSelected = isSameDay(d, selected)
            return (
              <button
                key={d.toISOString()}
                type="button"
                role="gridcell"
                aria-label={ariaLabel(d)}
                aria-selected={isSelected}
                onClick={() => select(d)}
                className={cn(
                  dayBase,
                  cellSizes[size],
                  spec.day,
                  outside && spec.outside,
                  isSelected && spec.selected
                )}
              >
                {d.getDate()}
              </button>
            )
          })}
        </div>
      ))}
    </div>
  )
}

/* ---- 1. InfoCalendar ---- */

const infoSpec: ToneSpec = {
  tone: "info",
  root: "border-info/30 bg-[color-mix(in_oklab,var(--color-info)_5%,var(--color-card))] text-card-foreground",
  title: "text-info",
  nav: "text-info hover:bg-info-soft hover:text-info-soft-foreground",
  weekday: "text-info/70",
  day: "text-foreground hover:bg-info-soft hover:text-info-soft-foreground",
  selected: "bg-info text-info-foreground hover:bg-info hover:text-info-foreground",
  outside: "text-muted-foreground/50",
}

export function InfoCalendar(props: ToneCalendarProps) {
  return <ToneCalendarBase spec={infoSpec} props={props} />
}

/* ---- 2. SuccessCalendar ---- */

const successSpec: ToneSpec = {
  tone: "success",
  root: "border-success/30 bg-[color-mix(in_oklab,var(--color-success)_5%,var(--color-card))] text-card-foreground",
  title: "text-success",
  nav: "text-success hover:bg-success-soft hover:text-success-soft-foreground",
  weekday: "text-success/70",
  day: "text-foreground hover:bg-success-soft hover:text-success-soft-foreground",
  selected: "bg-success text-success-foreground hover:bg-success hover:text-success-foreground",
  outside: "text-muted-foreground/50",
}

export function SuccessCalendar(props: ToneCalendarProps) {
  return <ToneCalendarBase spec={successSpec} props={props} />
}

/* ---- 3. WarningCalendar ---- */

const warningSpec: ToneSpec = {
  tone: "warning",
  root: "border-warning/30 bg-[color-mix(in_oklab,var(--color-warning)_5%,var(--color-card))] text-card-foreground",
  title: "text-warning",
  nav: "text-warning hover:bg-warning-soft hover:text-warning-soft-foreground",
  weekday: "text-warning/70",
  day: "text-foreground hover:bg-warning-soft hover:text-warning-soft-foreground",
  selected: "bg-warning text-warning-foreground hover:bg-warning hover:text-warning-foreground",
  outside: "text-muted-foreground/50",
}

export function WarningCalendar(props: ToneCalendarProps) {
  return <ToneCalendarBase spec={warningSpec} props={props} />
}

/* ---- 4. DangerCalendar ---- */

const dangerSpec: ToneSpec = {
  tone: "danger",
  root: "border-danger/30 bg-[color-mix(in_oklab,var(--color-danger)_5%,var(--color-card))] text-card-foreground",
  title: "text-danger",
  nav: "text-danger hover:bg-danger-soft hover:text-danger-soft-foreground",
  weekday: "text-danger/70",
  day: "text-foreground hover:bg-danger-soft hover:text-danger-soft-foreground",
  selected: "bg-danger text-danger-foreground hover:bg-danger hover:text-danger-foreground",
  outside: "text-muted-foreground/50",
}

export function DangerCalendar(props: ToneCalendarProps) {
  return <ToneCalendarBase spec={dangerSpec} props={props} />
}

/* ---- 5. MutedCalendar: notr, dusuk kontrastli ton ---- */

const mutedSpec: ToneSpec = {
  tone: "neutral",
  root: "border-border bg-muted text-foreground",
  title: "text-foreground",
  nav: "text-muted-foreground hover:bg-background hover:text-foreground",
  weekday: "text-muted-foreground",
  day: "text-muted-foreground hover:bg-background hover:text-foreground",
  selected: "bg-background text-foreground ring-1 ring-inset ring-border hover:bg-background hover:text-foreground",
  outside: "text-muted-foreground/40",
}

export function MutedCalendar(props: ToneCalendarProps) {
  return <ToneCalendarBase spec={mutedSpec} props={props} />
}

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

The info tone across the header, hover and selection.

January 2026

Success

The success tone for confirmed or available dates.

January 2026

Warning

The warning tone for dates that need attention.

January 2026

Danger

The danger tone for blocked or invalid dates.

January 2026

Muted

A neutral low-contrast tone that recedes.

January 2026

ai2 Tone calendars: 5 styled variations on the token system

The ai2 Tone calendars are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around month-grid calendars colored by an ai2 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: no month transition; only the hover and selection colors transition. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the color transitions are dropped.

What is in the ai2 Tone calendars?

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: no month transition; only the hover and selection colors transition.
Reduced-motion aware: Under prefers-reduced-motion, the color transitions are dropped.
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 calendars 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.

Tone calendars

Installation

Run the following command

Install dependencies

Copy the source

Variations

Info

Success

Warning

Danger

Muted

ai2 Tone calendars: 5 styled variations on the token system

What is in the ai2 Tone calendars?

Why use it

Features

Production tips

Works with the rest of ai2

FAQs

Are the ai2 Tone calendars free?

Do they use framer-motion?

Do they respect reduced motion?

Can I change the size?

Get new components in your inbox