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

Card checkboxes

Five selection cards where the entire card, tile or panel is the control instead of a small box: a soft card, a centered tile, an accent panel, an outline-only card and a solid filled card. Each is self-contained, sized, token-driven, keyboard accessible with role checkbox, and works controlled or uncontrolled.

CheckboxCard

Installation

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

Run the following command

npx shadcn@latest add @ai2/checkbox-card

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/checkbox-card.tsx

"use client"

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

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

/* Card checkbox family: 5 selection cards. The difference is not in the box
   itself but in the SHELL: the whole card/tile/panel is the clickable control
   (role="checkbox") and the box is only an indicator. The accessible name comes
   from the visible label inside the card via aria-labelledby; the ids are
   produced by React.useId(). Because the box stays under 24px it keeps the
   standard invisible touch-area extension (after:-inset-1.5), even though the
   card itself is already a large target. Color comes ONLY from tokens, via alpha
   color-mix. framer-motion switches instantly under reduced-motion. Used
   uncontrolled (defaultChecked) or controlled (checked/onCheckedChange). */

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

const boxSize: Record<StyledSize, string> = {
  sm: "size-4",
  md: "size-5",
  lg: "size-6",
  xl: "size-7",
}

const iconSize: Record<StyledSize, string> = {
  sm: "size-3",
  md: "size-3.5",
  lg: "size-4",
  xl: "size-5",
}

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-base",
}

const cardPad: Record<StyledSize, string> = {
  sm: "gap-2.5 p-2.5",
  md: "gap-3 p-3",
  lg: "gap-3 p-4",
  xl: "gap-4 p-5",
}

/* Kart kabugu: genis hedef, focus halkasi, gecerlilik gorunumu. */
const cardBase =
  "relative flex w-full max-w-xs cursor-pointer select-none items-center text-left outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:shrink-0 [&_i]:leading-none"

/* The box indicator: the touch-area extension stays even though the card itself is
   the control. */
const boxBase =
  "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors after:absolute after:-inset-1.5"

/* Transition type: instant under reduced-motion, spring otherwise. */
type SpringLike = { duration: number } | { type: "spring"; stiffness: number; damping: number }

type CheckboxProps = Omit<React.ComponentProps<"button">, "onChange"> & {
  size?: StyledSize
  label?: string
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}

function useCheckbox(props: {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}) {
  const { checked, defaultChecked, onCheckedChange } = props
  const reduce = useReducedMotion()
  const [internal, setInternal] = React.useState(defaultChecked ?? false)
  const on = checked ?? internal
  const toggle = () => {
    if (checked === undefined) setInternal((v) => !v)
    onCheckedChange?.(!on)
  }
  const spring: SpringLike = reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 500, damping: 30 }
  return { on, toggle, spring, reduce }
}

/* Kutu icindeki isaret: yay ile olceklenerek girer. */
function CheckMark({
  on,
  size,
  spring,
}: {
  on: boolean
  size: StyledSize
  spring: SpringLike
}) {
  return (
    <motion.span
      initial={false}
      animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}
      transition={spring}
      className="flex items-center justify-center"
    >
      <Check className={cn(iconSize[size], "stroke-[3]")} />
    </motion.span>
  )
}

/* Card: a card with a soft token fill whose border turns primary when selected. */
export function CardCheckbox({
  className,
  size = "md",
  label = "Enable notifications",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        cardBase,
        cardPad[size],
        "rounded-lg border",
        on
          ? "border-primary bg-[color-mix(in_oklab,var(--color-primary)_8%,transparent)]"
          : "border-border bg-card hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        className={cn(
          boxBase,
          boxSize[size],
          on ? "border-primary bg-primary text-primary-foreground" : "border-field-border text-transparent"
        )}
      >
        <CheckMark on={on} size={size} spring={spring} />
      </span>
      <span id={labelId} className={cn(textSize[size], "font-medium text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Tile: dikey ortalanmis kare tile, isaret rozeti sag ustte belirir. */
export function TileCheckbox({
  className,
  size = "md",
  label = "Compact",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        cardBase,
        cardPad[size],
        "w-auto flex-col items-center justify-center rounded-xl border text-center",
        on
          ? "border-primary bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]"
          : "border-border bg-card hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        className={cn(
          boxBase,
          boxSize[size],
          "rounded-full",
          on ? "border-primary bg-primary text-primary-foreground" : "border-field-border text-transparent"
        )}
      >
        <CheckMark on={on} size={size} spring={spring} />
      </span>
      <span id={labelId} className={cn(textSize[size], "font-medium text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Panel: sol tarafta isaretlenince buyuyen aksan cubugu tasiyan genis panel. */
export function PanelCheckbox({
  className,
  size = "md",
  label = "Weekly digest",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        cardBase,
        cardPad[size],
        "overflow-hidden rounded-lg border border-border bg-card pl-4",
        on
          ? "bg-[color-mix(in_oklab,var(--color-primary)_6%,transparent)]"
          : "hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <motion.span
        aria-hidden="true"
        initial={false}
        animate={{ scaleY: on ? 1 : 0 }}
        transition={spring}
        className="absolute inset-y-0 left-0 w-1 origin-center bg-primary"
      />
      <span
        aria-hidden="true"
        className={cn(
          boxBase,
          boxSize[size],
          on ? "border-primary bg-primary text-primary-foreground" : "border-field-border text-transparent"
        )}
      >
        <CheckMark on={on} size={size} spring={spring} />
      </span>
      <span id={labelId} className={cn(textSize[size], "font-medium text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* Bordered: no fill, only the border and the ring thicken. */
export function BorderedCheckbox({
  className,
  size = "md",
  label = "Outline only",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        cardBase,
        cardPad[size],
        "rounded-lg border-2 bg-transparent",
        on
          ? "border-primary text-foreground"
          : "border-border hover:border-[color-mix(in_oklab,var(--color-foreground)_24%,transparent)]",
        className
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        className={cn(
          boxBase,
          boxSize[size],
          on ? "border-primary text-primary" : "border-field-border text-transparent"
        )}
      >
        <CheckMark on={on} size={size} spring={spring} />
      </span>
      <span id={labelId} className={cn(textSize[size], "font-medium text-foreground")}>
        {label}
      </span>
    </button>
  )
}

/* FilledCard: isaretlenince kartin tamami primary yuzeye doner. */
export function FilledCardCheckbox({
  className,
  size = "md",
  label = "Solid card",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={on}
      aria-labelledby={labelId}
      data-slot="styled-checkbox"
      onClick={toggle}
      className={cn(
        cardBase,
        cardPad[size],
        "rounded-lg border",
        on
          ? "border-primary bg-primary text-primary-foreground"
          : "border-border bg-card text-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)]",
        className
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        className={cn(
          boxBase,
          boxSize[size],
          on
            ? "border-primary-foreground bg-primary-foreground text-primary"
            : "border-field-border text-transparent"
        )}
      >
        <CheckMark on={on} size={size} spring={spring} />
      </span>
      <span id={labelId} className={cn(textSize[size], "font-medium")}>
        {label}
      </span>
    </button>
  )
}

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.

Card

A soft-filled card whose border turns primary when selected.

Tile

A vertical, centered tile with a round check indicator.

Panel

A wide panel with an accent bar that grows in on the left edge.

Bordered

An outline-only card: no fill, the border carries the state.

Filled card

The whole card turns into a solid primary surface when selected.

ai2 Card checkboxes: 5 styled variations on the token system

The ai2 Card checkboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around selection cards where the whole card is the checkbox. 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 scales the check in and grows the accent bar. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the check and the accent appear instantly with no animation.

What is in the ai2 Card checkboxes?

5 exports in one file: Card, Tile, Panel, Bordered and Filled card. 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 scales the check in and grows the accent bar.
Reduced-motion aware: Under prefers-reduced-motion, the check and the accent appear instantly with no animation.
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 Card checkboxes 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.