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

Minimal calendars

Five calendars that pull the chrome back: a bare grid, a ghost surface, a thin ring-only selection, a dense compact grid and a clean spacious card. Each is self-contained (no date library), renders an accessible month grid, and starts from a fixed month so the output stays deterministic.

CalendarMinimal

Installation

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

Run the following command

npx shadcn@latest add @ai2/calendar-minimal

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

Install dependencies

npm install lucide-react

Copy the source

components/ui/calendar-minimal.tsx

"use client"

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

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

/* Minimal calendar family: 5 plain month grids that pull the shell back (borderless, ghost, thin, tight, clean). 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. */

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 denseSizes: Record<StyledSize, string> = {
  sm: "size-6 text-[0.65rem]",
  md: "size-7 text-xs",
  lg: "size-8 text-xs",
  xl: "size-9 text-sm",
}

const dayBase =
  "relative inline-flex items-center justify-center 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 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

interface MinimalSpec {
  /** Kok yuzey. */
  root: string
  /** Baslik satiri. */
  header: string
  /** Baslik metni. */
  title: string
  /** Prev/next butonlari. */
  nav: string
  /** Hafta basliklari. */
  weekday: string
  /** Izgara bosluklari. */
  gap: string
  /** Secilmemis gun. */
  day: string
  /** Secili gun. */
  selected: string
  /** Ay disi gunler. */
  outside: string
  /** Hucre olcek tablosu (varsayilan cellSizes). */
  cell?: Record<StyledSize, string>
}

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

/* The shared body; there is no difference other than MinimalSpec. */
function MinimalCalendarBase({
  spec,
  props,
}: {
  spec: MinimalSpec
  props: MinimalCalendarProps
}) {
  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))
  const cell = spec.cell ?? cellSizes

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn("inline-block", spec.root, className)}
    >
      <div className={cn("flex items-center justify-between gap-2", spec.header)}>
        <button
          type="button"
          onClick={goPrev}
          aria-label="Previous month"
          className={cn(navBase, spec.nav)}
        >
          <ChevronLeft />
        </button>
        <div id={titleId} aria-live="polite" className={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={cn("grid grid-cols-7", spec.gap)}>
        {WEEKDAYS.map((w) => (
          <div
            key={w}
            role="columnheader"
            className={cn("flex items-center justify-center py-1", spec.weekday)}
          >
            {w}
          </div>
        ))}
      </div>
      {weeks.map((week) => (
        <div key={week[0].toISOString()} role="row" className={cn("grid grid-cols-7", spec.gap)}>
          {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,
                  cell[size],
                  spec.day,
                  outside && spec.outside,
                  isSelected && spec.selected
                )}
              >
                {d.getDate()}
              </button>
            )
          })}
        </div>
      ))}
    </div>
  )
}

/* ---- 1. BareCalendar: no card, no border, only the grid ---- */

const bareSpec: MinimalSpec = {
  root: "bg-transparent text-foreground",
  header: "mb-2 px-0.5",
  title: "text-sm font-medium",
  nav: "",
  weekday: "text-xs font-medium text-muted-foreground",
  gap: "gap-1",
  day: "rounded-md text-foreground hover:bg-accent hover:text-accent-foreground",
  selected: "bg-foreground text-background hover:bg-foreground hover:text-background",
  outside: "text-muted-foreground/40",
}

export function BareCalendar(props: MinimalCalendarProps) {
  return <MinimalCalendarBase spec={bareSpec} props={props} />
}

/* ---- 2. GhostCalendar: the selected day is only a light fill ---- */

const ghostSpec: MinimalSpec = {
  root: "rounded-xl bg-[color-mix(in_oklab,var(--color-foreground)_3%,transparent)] p-3 text-foreground",
  header: "mb-2 px-0.5",
  title: "text-sm font-medium",
  nav: "",
  weekday: "text-xs font-normal text-muted-foreground",
  gap: "gap-1",
  day: "rounded-lg text-muted-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] hover:text-foreground",
  selected:
    "bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] font-medium text-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] hover:text-foreground",
  outside: "text-muted-foreground/40",
}

export function GhostCalendar(props: MinimalCalendarProps) {
  return <MinimalCalendarBase spec={ghostSpec} props={props} />
}

/* ---- 3. ThinCalendar: ince kenarlik, secili gun ince halka ---- */

const thinSpec: MinimalSpec = {
  root: "rounded-lg border border-border bg-card p-3 text-card-foreground",
  header: "mb-2 px-0.5",
  title: "text-sm font-normal tracking-wide",
  nav: "",
  weekday: "text-[0.65rem] font-normal uppercase tracking-wider text-muted-foreground",
  gap: "gap-1",
  day: "rounded-full font-light text-foreground hover:bg-accent hover:text-accent-foreground",
  selected:
    "bg-transparent font-normal text-foreground ring-1 ring-foreground hover:bg-transparent hover:text-foreground",
  outside: "text-muted-foreground/40",
}

export function ThinCalendar(props: MinimalCalendarProps) {
  return <MinimalCalendarBase spec={thinSpec} props={props} />
}

/* ---- 4. DenseCalendar: kucuk hucreler, sifira yakin bosluk ---- */

const denseSpec: MinimalSpec = {
  root: "rounded-lg border border-border bg-card p-2 text-card-foreground",
  header: "mb-1 px-0.5",
  title: "text-xs font-medium",
  nav: "",
  weekday: "text-[0.6rem] font-medium text-muted-foreground",
  gap: "gap-px",
  day: "rounded-sm text-foreground hover:bg-accent hover:text-accent-foreground",
  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
  outside: "text-muted-foreground/40",
  cell: denseSizes,
}

export function DenseCalendar(props: MinimalCalendarProps) {
  return <MinimalCalendarBase spec={denseSpec} props={props} />
}

/* ---- 5. CleanCalendar: bol beyaz alan, alt cizgili baslik ---- */

const cleanSpec: MinimalSpec = {
  root: "rounded-2xl border border-border bg-background p-5 text-foreground",
  header: "mb-3 border-b border-border pb-3",
  title: "text-sm font-semibold tracking-tight",
  nav: "",
  weekday: "text-[0.65rem] font-medium uppercase tracking-wide text-muted-foreground",
  gap: "gap-1.5",
  day: "rounded-md text-foreground hover:bg-accent hover:text-accent-foreground",
  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
  outside: "text-muted-foreground/40",
}

export function CleanCalendar(props: MinimalCalendarProps) {
  return <MinimalCalendarBase spec={cleanSpec} 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.

Bare

No card and no border, just the grid.

January 2026

Ghost

A faint surface with a low-contrast selection.

January 2026

Thin

Light weights and a ring-only selected day.

January 2026

Dense

Small cells with near-zero gaps.

January 2026

Clean

Generous whitespace and an underlined header.

January 2026

ai2 Minimal calendars: 5 styled variations on the token system

The ai2 Minimal calendars are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around understated month-grid calendars with the chrome pulled back. 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 Minimal calendars?

5 exports in one file: Bare, Ghost, Thin, Dense and Clean. 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 Minimal 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.

Minimal calendars

Installation

Run the following command

Install dependencies

Copy the source

Variations

Bare

Ghost

Thin

Dense

Clean

ai2 Minimal calendars: 5 styled variations on the token system

What is in the ai2 Minimal calendars?

Why use it

Features

Production tips

Works with the rest of ai2

FAQs

Are the ai2 Minimal calendars free?

Do they use framer-motion?

Do they respect reduced motion?

Can I change the size?

Get new components in your inbox