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

Motion sheets

Five right-edge panels with distinct entrances: slide, spring, fade, scale and overshoot. Each is self-contained (no radix), sized, token-driven, and closes on backdrop click or Escape.

SheetMotion

Installation

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

Run the following command

npx shadcn@latest add @ai2/sheet-motion

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/sheet-motion.tsx

"use client"

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

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

/* Motion sheet family: 5 showy side panels. They all open from the RIGHT edge; the
   panel itself is plain (bg-card) and the DIFFERENCE is the character of the
   enter/exit animation. Each export is a complete sheet: internal open/closed state
   (uncontrolled defaultOpen or controlled open/onOpenChange), NO radix or portal -
   a self-contained fixed backdrop + a fixed panel pinned to the edge. It closes on
   a backdrop click, Escape or the close button. The panel takes focus on open.
   AnimatePresence handles enter/exit; under reduced motion ALL transforms drop away
   and only an opacity fade remains. Color comes ONLY from tokens, via alpha
   color-mix. The essentials mechanism is preserved: sliding from the right edge via
   data-slot + slideOffset. */

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

type Edge = "right"

const widthSize: Record<StyledSize, string> = {
  sm: "w-72",
  md: "w-80",
  lg: "w-96",
  xl: "w-[32rem]",
}

const edgeAnchor: Record<Edge, string> = {
  right: "inset-y-0 right-0",
}

/* The offset the panel is pushed past the edge by when closed. +x for the right edge. */
function slideOffset(edge: Edge) {
  switch (edge) {
    case "right":
      return { x: "100%" }
  }
}

/* The enter/exit definition each export carries. Combined with slideOffset. */
interface SheetMotion {
  initial: Record<string, number | string>
  animate: Record<string, number | string>
  exit: Record<string, number | string>
  transition: Record<string, unknown>
}

interface SheetProps {
  size?: StyledSize
  trigger?: React.ReactNode
  title?: React.ReactNode
  children?: React.ReactNode
  className?: string
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (o: boolean) => void
}

/* Controlled/uncontrolled acik durum yonetimi. */
function useControllableOpen(
  open: boolean | undefined,
  defaultOpen: boolean | undefined,
  onOpenChange: ((o: boolean) => void) | undefined
) {
  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false)
  const isControlled = open !== undefined
  const value = isControlled ? open : uncontrolled
  const setValue = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setUncontrolled(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )
  return [value, setValue] as const
}

interface ShellProps extends SheetProps {
  edge: Edge
  slot: string
  panelClassName: string
  backdropClassName: string
  sheetMotion: SheetMotion
}

/* Shared shell: trigger plus an AnimatePresence backdrop plus panel. sheetMotion carries the enter/exit animation supplied from outside; it differs in every export. The Essentials slideOffset mechanism is preserved: the closed position is pushed past the edge. */
function SheetShell({
  edge,
  slot,
  panelClassName,
  backdropClassName,
  sheetMotion,
  size = "md",
  trigger,
  title,
  children,
  className,
  open,
  defaultOpen,
  onOpenChange,
}: ShellProps) {
  const reduce = useReducedMotion()
  const [isOpen, setOpen] = useControllableOpen(open, defaultOpen, onOpenChange)
  const panelRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [isOpen, setOpen])

  const sizeClass = cn("h-full", widthSize[size])
  const offset = slideOffset(edge)

  /* Reduced motion: every transform is dropped, only the opacity fade remains. */
  const fade = {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
    transition: { duration: 0 },
  }
  const active = reduce
    ? fade
    : {
        initial: { ...offset, ...sheetMotion.initial },
        animate: { x: 0, y: 0, ...sheetMotion.animate },
        exit: { ...offset, ...sheetMotion.exit },
        transition: sheetMotion.transition,
      }

  return (
    <div data-slot={slot} className="inline-flex">
      {/* The ARIA state lives on the REAL trigger. There used to be a
          `<span role="button" tabIndex={-1}>` wrapper, which produced two
          buttons in the AX tree: one carrying the state (not focusable) and
          one that took focus (stateless). A screen-reader user never heard
          "has dialog" or "expanded" - measured with the CDP AX tree. */}
      {React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(trigger) ? (
        React.cloneElement(trigger, {
          "aria-haspopup": "dialog",
          "aria-expanded": isOpen,
          onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
            trigger.props.onClick?.(event)
            setOpen(true)
          },
        })
      ) : (
        <button
          type="button"
          aria-haspopup="dialog"
          aria-expanded={isOpen}
          onClick={() => setOpen(true)}
          className="inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_i]:text-base [&_i]:leading-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
        >
          {trigger ?? "Open"}
        </button>
      )}

      <AnimatePresence>
        {isOpen ? (
          <div className="fixed inset-0 z-50">
            <motion.div
              data-slot="styled-sheet-backdrop"
              onClick={() => setOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: reduce ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
              className={cn("absolute inset-0", backdropClassName)}
            />
            <motion.div
              ref={panelRef}
              data-slot="styled-sheet-panel"
              role="dialog"
              aria-modal="true"
              tabIndex={-1}
              onAnimationComplete={() => panelRef.current?.focus()}
              initial={active.initial}
              animate={active.animate}
              exit={active.exit}
              transition={active.transition}
              className={cn(
                "fixed flex flex-col gap-4 p-6 shadow-lg outline-none",
                edgeAnchor[edge],
                sizeClass,
                panelClassName,
                className
              )}
            >
              <div className="flex items-start justify-between gap-4">
                {title ? (
                  <h2 data-slot="styled-sheet-title" className="text-base font-semibold text-foreground">
                    {title}
                  </h2>
                ) : (
                  <span />
                )}
                <button
                  type="button"
                  onClick={() => setOpen(false)}
                  aria-label="Close"
                  className="relative -m-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-2 [&_i]:text-base [&_i]:leading-none [&_svg]:size-4"
                >
                  <X />
                </button>
              </div>
              <div className="min-h-0 flex-1 overflow-auto text-sm text-muted-foreground">{children}</div>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

const solidBackdrop = "bg-[color-mix(in_oklab,var(--color-foreground)_50%,transparent)]"
const panelLook = "border-l border-border bg-card text-card-foreground"

/* Slide: duz kayma, yumusak ease. Overshoot yok, sabit sureli tween. */
export function SlideSheet(props: SheetProps) {
  return (
    <SheetShell
      {...props}
      edge="right"
      slot="styled-sheet"
      backdropClassName={solidBackdrop}
      panelClassName={panelLook}
      sheetMotion={{
        initial: {},
        animate: {},
        exit: {},
        transition: { type: "tween", duration: 0.32, ease: [0.4, 0, 0.2, 1] },
      }}
    />
  )
}

/* Spring: a springy entrance that settles with a slight overshoot. */
export function SpringSheet(props: SheetProps) {
  return (
    <SheetShell
      {...props}
      edge="right"
      slot="styled-sheet"
      backdropClassName={solidBackdrop}
      panelClassName={panelLook}
      sheetMotion={{
        initial: {},
        animate: {},
        exit: {},
        transition: { type: "spring", stiffness: 300, damping: 26 },
      }}
    />
  )
}

/* Fade: kayma ile opacity fade birlikte; panel kayarken belirir. */
export function FadeSheet(props: SheetProps) {
  return (
    <SheetShell
      {...props}
      edge="right"
      slot="styled-sheet"
      backdropClassName={solidBackdrop}
      panelClassName={panelLook}
      sheetMotion={{
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
        transition: { type: "tween", duration: 0.36, ease: [0.16, 1, 0.3, 1] },
      }}
    />
  )
}

/* Scale: kayarken hafif buyume; kapalikken az kuculmus gelir. */
export function ScaleSheet(props: SheetProps) {
  return (
    <SheetShell
      {...props}
      edge="right"
      slot="styled-sheet"
      backdropClassName={solidBackdrop}
      panelClassName={panelLook}
      sheetMotion={{
        initial: { scale: 0.94 },
        animate: { scale: 1 },
        exit: { scale: 0.94 },
        transition: { type: "spring", stiffness: 260, damping: 28 },
      }}
    />
  )
}

/* Overshoot: agresif yay, dusuk damping ile kenardan gecip geri seker. */
export function OvershootSheet(props: SheetProps) {
  return (
    <SheetShell
      {...props}
      edge="right"
      slot="styled-sheet"
      backdropClassName={solidBackdrop}
      panelClassName={panelLook}
      sheetMotion={{
        initial: {},
        animate: {},
        exit: {},
        transition: { type: "spring", stiffness: 520, damping: 13 },
      }}
    />
  )
}

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.

Slide

Slides in with a smooth, even ease.

import { SlideSheet } from "@/components/ui/sheet-motion"

<SlideSheet title="Sheet title">A self-contained side panel with a distinct entrance. Click the backdrop or press Escape to close.</SlideSheet>

Spring

Springs in with a gentle overshoot.

import { SpringSheet } from "@/components/ui/sheet-motion"

<SpringSheet title="Sheet title">A self-contained side panel with a distinct entrance. Click the backdrop or press Escape to close.</SpringSheet>

Fade

Slides and fades in opacity together.

import { FadeSheet } from "@/components/ui/sheet-motion"

<FadeSheet title="Sheet title">A self-contained side panel with a distinct entrance. Click the backdrop or press Escape to close.</FadeSheet>

Scale

Scales up slightly while it slides in.

import { ScaleSheet } from "@/components/ui/sheet-motion"

<ScaleSheet title="Sheet title">A self-contained side panel with a distinct entrance. Click the backdrop or press Escape to close.</ScaleSheet>

Overshoot

Overshoots the edge and springs back aggressively.

import { OvershootSheet } from "@/components/ui/sheet-motion"

<OvershootSheet title="Sheet title">A self-contained side panel with a distinct entrance. Click the backdrop or press Escape to close.</OvershootSheet>

ai2 Motion sheets: 5 styled variations on the token system

The ai2 Motion sheets are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around self-contained right-edge side panels with distinct entrances. 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 animates a distinct even slide, gentle spring, slide-plus-fade, scale or aggressive overshoot on enter and exit; the backdrop fades. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transforms are skipped and the panel fades instead.

What is in the ai2 Motion sheets?

5 exports in one file: Slide, Spring, Fade, Scale and Overshoot. 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 animates a distinct even slide, gentle spring, slide-plus-fade, scale or aggressive overshoot on enter and exit; the backdrop fades.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the panel fades instead.
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 Motion sheets 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.