Are the ai2 Styled calendar 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 month change is instant with no slide.

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.

Styled calendar

Five calendars: classic, rounded, range, compact and glass. Each is self-contained (no date library), sized, token-driven, and renders an accessible month grid.

Forms & InputsCalendar

Installation

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

Run the following command

npx shadcn@latest add @ai2/calendar-styled

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/calendar-styled.tsx

"use client"

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

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

/* Styled calendar family: 5 decorative date pickers with an always-visible
   (inline) month grid. The visible month is computed from state; to avoid an
   SSR/hydration mismatch the default month is FIXED (January 2025), NOT
   new Date()/today. The "today" ring is added only after mount (in an effect), so
   the server output stays deterministic. Color comes ONLY from semantic tokens;
   transparency uses the Tailwind slash opacity modifier (which compiles to
   color-mix), NEVER a raw var(--x)/0.4. framer-motion (motion/react) slides on a
   month change and is disabled under reduced-motion. */

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

/* Deterministic: fixed name tables that do not depend on the locale
   (toLocaleString can give a different result on the server and the client). */
const MONTHS = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
] as const

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

const FIXED_MONTH = new Date(2025, 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()
  )
}

/* Verilen ayin 6x7 (42 gun) izgarasini kurar; onceki/sonraki ay tasmalari
   dahil. weekStartsOn: 0 = Pazar, 1 = Pazartesi. */
function buildMonthGrid(month: Date, weekStartsOn: 0 | 1): Date[] {
  const first = startOfMonth(month)
  const offset = (first.getDay() - weekStartsOn + 7) % 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 ariaLabel(d: Date) {
  return `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
}

/* Gorunur ayi kontrollu (month) / kontrolsuz (defaultMonth) yonetir; prev/next
   yon bilgisiyle birlikte. */
function useVisibleMonth(month?: Date, defaultMonth?: Date) {
  const [internal, setInternal] = React.useState<Date>(() =>
    startOfMonth(defaultMonth ?? FIXED_MONTH)
  )
  const [dir, setDir] = React.useState(0)
  const visible = month ? startOfMonth(month) : internal
  const goPrev = React.useCallback(() => {
    setDir(-1)
    if (month === undefined) setInternal((m) => addMonths(m, -1))
  }, [month])
  const goNext = React.useCallback(() => {
    setDir(1)
    if (month === undefined) setInternal((m) => addMonths(m, 1))
  }, [month])
  return { visible, dir, goPrev, goNext }
}

/* Secili gunu kontrollu (value) / kontrolsuz (defaultValue) yonetir. */
function useSelected(value?: Date, defaultValue?: Date, onSelect?: (d: Date) => void) {
  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue)
  const selected = value ?? internal
  const select = React.useCallback(
    (d: Date) => {
      if (value === undefined) setInternal(d)
      onSelect?.(d)
    },
    [value, onSelect]
  )
  return { selected, select }
}

/* "Today" is computed only on the client (after mount) -> the SSR stays
   deterministic. */
function useToday() {
  const [today, setToday] = React.useState<Date | null>(null)
  React.useEffect(() => {
    setToday(new Date())
  }, [])
  return today
}

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

const navButton =
  "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0"

interface FrameProps {
  className?: string
  root: string
  header: string
  title: string
  weekday: string
  weekdays: readonly string[]
  visible: Date
  dir: number
  gridClassName: string
  onPrev: () => void
  onNext: () => void
  children: React.ReactNode
}

/* Shared shell: a bordered body plus a header (prev/next plus the month name) plus weekday headers plus a grid that slides on month change. */
function CalendarFrame({
  className,
  root,
  header,
  title,
  weekday,
  weekdays,
  visible,
  dir,
  gridClassName,
  onPrev,
  onNext,
  children,
}: FrameProps) {
  const reduce = useReducedMotion()
  const monthKey = `${visible.getFullYear()}-${visible.getMonth()}`
  return (
    <div data-slot="styled-calendar" role="grid" aria-label="Calendar" className={cn(root, className)}>
      <div className={header}>
        <button type="button" onClick={onPrev} aria-label="Previous month" className={navButton}>
          <ChevronLeft />
        </button>
        <div aria-live="polite" className={title}>
          {MONTHS[visible.getMonth()]} {visible.getFullYear()}
        </div>
        <button type="button" onClick={onNext} aria-label="Next month" className={navButton}>
          <ChevronRight />
        </button>
      </div>
      <div role="row" className={cn("grid grid-cols-7", gridClassName)}>
        {weekdays.map((w) => (
          <div
            key={w}
            role="columnheader"
            className={cn("flex items-center justify-center py-1", weekday)}
          >
            {w}
          </div>
        ))}
      </div>
      <div className="relative overflow-hidden">
        <motion.div
          key={monthKey}
          initial={reduce ? false : { x: dir >= 0 ? "18%" : "-18%", opacity: 0 }}
          animate={reduce ? { x: 0, opacity: 1 } : { x: 0, opacity: 1 }}
          transition={reduce ? { duration: 0 } : { duration: 0.22, ease: "easeOut" }}
          className={cn("grid grid-cols-7", gridClassName)}
        >
          {children}
        </motion.div>
      </div>
    </div>
  )
}

interface DayAppearance {
  base: string
  selected: string
  today: string
  outside: string
  cell?: Record<StyledSize, string>
}

interface BaseCalendarProps {
  className?: string
  size?: StyledSize
  month?: Date
  defaultMonth?: Date
  value?: Date
  defaultValue?: Date
  onSelect?: (d: Date) => void
}

interface Chrome {
  root: string
  header: string
  title: string
  weekday: string
  weekdays: readonly string[]
  gridClassName: string
  weekStartsOn: 0 | 1
}

/* Shared body for the single-select variants (Classic/Rounded/Compact/Glass); only the appearance class sets differ. */
function SingleCalendar({
  chrome,
  day,
  props,
}: {
  chrome: Chrome
  day: DayAppearance
  props: BaseCalendarProps
}) {
  const { className, size = "md", month, defaultMonth, value, defaultValue, onSelect } = props
  const { visible, dir, goPrev, goNext } = useVisibleMonth(month, defaultMonth)
  const { selected, select } = useSelected(value, defaultValue, onSelect)
  const today = useToday()
  const cell = day.cell ?? cellSizes
  const days = buildMonthGrid(visible, chrome.weekStartsOn)

  return (
    <CalendarFrame
      className={className}
      root={chrome.root}
      header={chrome.header}
      title={chrome.title}
      weekday={chrome.weekday}
      weekdays={chrome.weekdays}
      visible={visible}
      dir={dir}
      gridClassName={chrome.gridClassName}
      onPrev={goPrev}
      onNext={goNext}
    >
      {days.map((d) => {
        const outside = d.getMonth() !== visible.getMonth()
        const isSel = isSameDay(d, selected)
        const isToday = isSameDay(d, today)
        return (
          <button
            key={d.toISOString()}
            type="button"
            role="gridcell"
            aria-label={ariaLabel(d)}
            aria-pressed={isSel}
            onClick={() => select(d)}
            className={cn(
              day.base,
              cell[size],
              outside && day.outside,
              isToday && !isSel && day.today,
              isSel && day.selected
            )}
          >
            {d.getDate()}
          </button>
        )
      })}
    </CalendarFrame>
  )
}

/* ---- 1. ClassicCalendar: temiz, kenarlikli ay izgarasi ---- */

const classicChrome: Chrome = {
  root: "inline-block rounded-xl border border-border bg-card p-3 text-card-foreground",
  header: "mb-2 flex items-center justify-between gap-2 px-1",
  title: "text-sm font-medium",
  weekday: "text-xs font-medium text-muted-foreground",
  weekdays: WEEKDAYS_MONDAY,
  gridClassName: "gap-1",
  weekStartsOn: 1,
}

const classicDay: DayAppearance = {
  base: "relative inline-flex items-center justify-center rounded-md font-normal text-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
  today: "ring-1 ring-inset ring-ring",
  outside: "text-muted-foreground/50",
}

export function ClassicCalendar(props: BaseCalendarProps) {
  return <SingleCalendar chrome={classicChrome} day={classicDay} props={props} />
}

/* ---- 2. RoundedCalendar: tam yuvarlak hucreler, secili = dolu daire ---- */

const roundedChrome: Chrome = {
  root: "inline-block rounded-2xl border border-border bg-card p-3 text-card-foreground",
  header: "mb-2 flex items-center justify-between gap-2 px-1",
  title: "text-sm font-semibold",
  weekday: "text-xs font-medium text-muted-foreground",
  weekdays: WEEKDAYS_MONDAY,
  gridClassName: "gap-1",
  weekStartsOn: 1,
}

const roundedDay: DayAppearance = {
  base: "relative inline-flex items-center justify-center rounded-full font-normal text-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
  selected: "bg-primary text-primary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground",
  today: "ring-1 ring-ring",
  outside: "text-muted-foreground/50",
}

export function RoundedCalendar(props: BaseCalendarProps) {
  return <SingleCalendar chrome={roundedChrome} day={roundedDay} props={props} />
}

/* ---- 4. CompactCalendar: daha sik hucreler, kucuk baslik ---- */

const compactChrome: Chrome = {
  root: "inline-block rounded-lg border border-border bg-card p-2 text-card-foreground",
  header: "mb-1 flex items-center justify-between gap-1 px-0.5",
  title: "text-xs font-medium",
  weekday: "text-[0.65rem] font-medium text-muted-foreground",
  weekdays: WEEKDAYS_SUNDAY,
  gridClassName: "gap-0.5",
  weekStartsOn: 0,
}

const compactDay: DayAppearance = {
  base: "relative inline-flex items-center justify-center rounded-md font-normal text-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
  selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
  today: "ring-1 ring-inset ring-ring",
  outside: "text-muted-foreground/50",
  cell: compactSizes,
}

export function CompactCalendar(props: BaseCalendarProps) {
  return <SingleCalendar chrome={compactChrome} day={compactDay} props={props} />
}

/* ---- 5. GlassCalendar: buzlu cam kart + backdrop-blur ---- */

const glassChrome: Chrome = {
  root: "relative inline-block overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-3 text-card-foreground shadow-[0_10px_40px_-16px_color-mix(in_oklab,var(--color-foreground)_45%,transparent)] supports-[backdrop-filter]:bg-card/55 supports-[backdrop-filter]:backdrop-blur-xl",
  header: "mb-2 flex items-center justify-between gap-2 px-1",
  title: "text-sm font-medium",
  weekday: "text-xs font-medium text-muted-foreground",
  weekdays: WEEKDAYS_MONDAY,
  gridClassName: "gap-1",
  weekStartsOn: 1,
}

const glassDay: DayAppearance = {
  base: "relative inline-flex items-center justify-center rounded-lg font-normal text-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent/60 hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none",
  selected: "bg-primary text-primary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground",
  today: "ring-1 ring-inset ring-ring",
  outside: "text-muted-foreground/50",
}

export function GlassCalendar(props: BaseCalendarProps) {
  return <SingleCalendar chrome={glassChrome} day={glassDay} props={props} />
}

/* ---- 3. RangeCalendar: a start + end range selection, with the days in
   between highlighted by a token fill. The outer signature is singular (onSelect
   reports the clicked day on every click); the range state is held inside the
   component. ---- */

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

export function RangeCalendar({
  className,
  size = "md",
  month,
  defaultMonth,
  value,
  defaultValue,
  onSelect,
}: BaseCalendarProps) {
  const { visible, dir, goPrev, goNext } = useVisibleMonth(month, defaultMonth)
  const today = useToday()
  const [start, setStart] = React.useState<Date | null>(
    value ?? defaultValue ?? null
  )
  const [end, setEnd] = React.useState<Date | null>(null)

  const handleSelect = React.useCallback(
    (d: Date) => {
      onSelect?.(d)
      if (start === null || end !== null) {
        setStart(d)
        setEnd(null)
        return
      }
      if (d.getTime() < start.getTime()) {
        setEnd(start)
        setStart(d)
      } else {
        setEnd(d)
      }
    },
    [start, end, onSelect]
  )

  const days = buildMonthGrid(visible, 1)

  return (
    <CalendarFrame
      className={className}
      root="inline-block rounded-xl border border-border bg-card p-3 text-card-foreground"
      header="mb-2 flex items-center justify-between gap-2 px-1"
      title="text-sm font-medium"
      weekday="text-xs font-medium text-muted-foreground"
      weekdays={WEEKDAYS_MONDAY}
      visible={visible}
      dir={dir}
      gridClassName="gap-y-1"
      onPrev={goPrev}
      onNext={goNext}
    >
      {days.map((d) => {
        const outside = d.getMonth() !== visible.getMonth()
        const isStart = isSameDay(d, start)
        const isEnd = isSameDay(d, end)
        const isEndpoint = isStart || isEnd
        const t = d.getTime()
        const inRange =
          start !== null &&
          end !== null &&
          t > start.getTime() &&
          t < end.getTime()
        const isToday = isSameDay(d, today)
        return (
          <button
            key={d.toISOString()}
            type="button"
            role="gridcell"
            aria-label={ariaLabel(d)}
            aria-pressed={isEndpoint}
            onClick={() => handleSelect(d)}
            className={cn(
              "relative inline-flex items-center justify-center font-normal text-foreground 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",
              rangeCellSizes[size],
              inRange && "bg-accent text-accent-foreground",
              isStart && "rounded-l-md",
              isEnd && "rounded-r-md",
              isStart && isEnd && "rounded-md",
              isEndpoint &&
                "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
              !isEndpoint && !inRange && "rounded-md hover:bg-accent hover:text-accent-foreground",
              outside && !isEndpoint && !inRange && "text-muted-foreground/50",
              isToday && !isEndpoint && !inRange && "ring-1 ring-inset ring-ring"
            )}
          >
            {d.getDate()}
          </button>
        )
      })}
    </CalendarFrame>
  )
}

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.

Classic

A clean bordered month grid.

January 2025

Rounded

Rounded day cells with a filled-circle selection.

January 2025

Range

Selects a start-end range with a token fill between.

January 2025

Compact

Tighter cells and a smaller header.

January 2025

Glass

A frosted glass calendar card.

January 2025

ai2 Styled calendar: 5 styled variations on the token system

The ai2 Styled calendar are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around month-grid date calendars. 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 the grid when the month changes. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the month change is instant with no slide.

What is in the ai2 Styled calendar?

5 exports in one file: Classic, Rounded, Range, Compact and Glass. 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 the grid when the month changes.
Reduced-motion aware: Under prefers-reduced-motion, the month change is instant with no slide.
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 Styled calendar 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.

Styled calendar

Installation

Run the following command

Install dependencies

Copy the source

Variations

Classic

Rounded

Range

Compact

Glass

ai2 Styled calendar: 5 styled variations on the token system

What is in the ai2 Styled calendar?

Why use it

Features

Production tips

Works with the rest of ai2

FAQs

Are the ai2 Styled calendar free?

Do they use framer-motion?

Do they respect reduced motion?

Can I change the size?

Get new components in your inbox