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

Corner dialogs

Five modal dialogs anchored to a screen edge instead of the center: top right, bottom right, top center, docked and offset. Each is self-contained (no radix), sized, token-driven, and closes on backdrop click or Escape.

DialogCorner

Installation

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

Run the following command

npx shadcn@latest add @ai2/dialog-corner

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/dialog-corner.tsx

"use client"

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

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

/* Corner dialog family: 5 modals positioned at the edge or corner of the screen
   rather than the center. Each export is a complete dialog: internal open/closed
   state (uncontrolled defaultOpen or controlled open/onOpenChange), NO radix or
   portal - a self-contained fixed backdrop + fixed panel. It closes on a backdrop
   click, Escape or the close button. The panel takes focus on open. The difference:
   the backdrop's flex alignment (align/justify) and the panelMotion (the slide
   direction) change per export according to that corner. No transform under reduced
   motion (only a fade). Color comes ONLY from tokens, via alpha color-mix. */

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

const panelSize: Record<StyledSize, string> = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-lg",
  xl: "max-w-2xl",
}

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

/* Base backdrop: align and justify are NOT carried here; each export gives its own corner placement through backdropClassName (items-* justify-*). */
const backdropClass =
  "fixed inset-0 z-50 flex p-4 bg-[color-mix(in_oklab,var(--color-foreground)_50%,transparent)]"

const panelBase =
  "relative w-full rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none"

const closeBtn =
  "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const triggerBtn =
  "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50"

/* Controlled/uncontrolled acik durum yonetimi. */
function useDialogState(props: DialogProps) {
  const { open, defaultOpen, onOpenChange } = props
  const isControlled = open !== undefined
  const [internal, setInternal] = React.useState(defaultOpen ?? false)
  const isOpen = isControlled ? open : internal

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setInternal(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )

  return { isOpen, setOpen }
}

/* Shared shell: trigger plus an AnimatePresence backdrop plus panel. backdropClassName carries the corner placement, panelMotion the slide direction from that corner. */
function DialogShell({
  props,
  panelClassName,
  panelMotion,
  backdropClassName,
}: {
  props: DialogProps
  panelClassName?: string
  panelMotion?: {
    initial: Record<string, number>
    animate: Record<string, number>
    exit: Record<string, number>
    transition?: Record<string, unknown>
  }
  backdropClassName?: string
}) {
  const { size = "md", trigger, title, children, className } = props
  const { isOpen, setOpen } = useDialogState(props)
  const reduce = useReducedMotion()
  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)
    const id = window.requestAnimationFrame(() => panelRef.current?.focus())
    return () => {
      window.removeEventListener("keydown", onKey)
      window.cancelAnimationFrame(id)
    }
  }, [isOpen, setOpen])

  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
  const motionProps = reduce || !panelMotion ? fade : panelMotion

  return (
    <>
      {/* ARIA durumu tetikleyicinin KENDISINDE. Once yoktu: ekran okuyucu

          kullanicisi butonun bir dialog actigini ve acik olup olmadigini

          HIC bilmiyordu. Canli AX taramasiyla bulundu (grep gostermemisti). */}

      <span data-slot="styled-dialog-trigger" className="inline-flex">

        {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={triggerBtn}

          >

            {trigger ?? "Open dialog"}

          </button>

        )}

      </span>

      <AnimatePresence>
        {isOpen ? (
          <motion.div
            data-slot="styled-dialog"
            className={cn(backdropClass, backdropClassName)}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            onClick={() => setOpen(false)}
          >
            <motion.div
              ref={panelRef}
              role="dialog"
              aria-modal="true"
              tabIndex={-1}
              className={cn(panelBase, panelSize[size], panelClassName, className)}
              initial={motionProps.initial}
              animate={motionProps.animate}
              exit={motionProps.exit}
              transition={panelMotion?.transition ?? { duration: 0.2, ease: "easeOut" }}
              onClick={(e) => e.stopPropagation()}
            >
              <button
                type="button"
                aria-label="Close"
                className={closeBtn}
                onClick={() => setOpen(false)}
              >
                <X />
              </button>
              {title ? (
                <div className="border-b border-border px-6 py-4 pr-12 text-base font-semibold">
                  {title}
                </div>
              ) : null}
              <div className="px-6 py-5 text-sm text-muted-foreground">{children}</div>
            </motion.div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </>
  )
}

/* TopRight: sag ust kose (items-start justify-end). Panel yukaridan ve sagdan
   kayarak girer, toast/bildirim modali hissi. */
export function TopRightDialog(props: DialogProps) {
  return (
    <DialogShell
      props={props}
      backdropClassName="items-start justify-end"
      panelMotion={{
        initial: { opacity: 0, x: 32, y: -24 },
        animate: { opacity: 1, x: 0, y: 0 },
        exit: { opacity: 0, x: 32, y: -24 },
        transition: { type: "spring", stiffness: 320, damping: 26 },
      }}
    />
  )
}

/* BottomRight: sag alt kose (items-end justify-end). Panel alttan kayarak girer. */
export function BottomRightDialog(props: DialogProps) {
  return (
    <DialogShell
      props={props}
      backdropClassName="items-end justify-end"
      panelMotion={{
        initial: { opacity: 0, y: 40 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: 40 },
        transition: { type: "spring", stiffness: 320, damping: 28 },
      }}
    />
  )
}

/* TopCenter: ust orta (items-start justify-center). Banner modal, ustten duser. */
export function TopCenterDialog(props: DialogProps) {
  return (
    <DialogShell
      props={props}
      backdropClassName="items-start justify-center"
      panelMotion={{
        initial: { opacity: 0, y: -40 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -32 },
        transition: { type: "spring", stiffness: 340, damping: 24 },
      }}
    />
  )
}

/* Docked: a full-width dock attached to the bottom (items-end). The panel is w-full, its top corners rounded, sliding up from below. */
export function DockedDialog(props: DialogProps) {
  return (
    <DialogShell
      props={props}
      backdropClassName="items-end justify-center p-0"
      panelClassName="!max-w-none w-full rounded-b-none rounded-t-2xl border-x-0 border-b-0"
      panelMotion={{
        initial: { opacity: 0, y: 56 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: 56 },
        transition: { type: "spring", stiffness: 300, damping: 30 },
      }}
    />
  )
}

/* Offset: shifted slightly up and left of centre (items-center justify-center), an artistic stance. The shift amount is baked into the rest position; it settles to the centre under reduced motion. */
export function OffsetDialog(props: DialogProps) {
  return (
    <DialogShell
      props={props}
      backdropClassName="items-center justify-center"
      panelMotion={{
        initial: { opacity: 0, x: -24, y: -8, scale: 0.96 },
        animate: { opacity: 1, x: -24, y: -40, scale: 1 },
        exit: { opacity: 0, x: -24, y: -8, scale: 0.96 },
        transition: { type: "spring", stiffness: 300, damping: 26 },
      }}
    />
  )
}

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.

Top right

Anchors to the top right and slides in from the top and right, like a notification.

import { TopRightDialog } from "@/components/ui/dialog-corner"

<TopRightDialog title="Dialog title">A self-contained modal that anchors to a screen edge. Click the backdrop or press Escape to close.</TopRightDialog>

Bottom right

Anchors to the bottom right and slides up from the bottom.

import { BottomRightDialog } from "@/components/ui/dialog-corner"

<BottomRightDialog title="Dialog title">A self-contained modal that anchors to a screen edge. Click the backdrop or press Escape to close.</BottomRightDialog>

Top center

A banner modal that drops in from the top center.

import { TopCenterDialog } from "@/components/ui/dialog-corner"

<TopCenterDialog title="Dialog title">A self-contained modal that anchors to a screen edge. Click the backdrop or press Escape to close.</TopCenterDialog>

Docked

A full-width dock pinned to the bottom, sliding up with rounded top corners.

import { DockedDialog } from "@/components/ui/dialog-corner"

<DockedDialog title="Dialog title">A self-contained modal that anchors to a screen edge. Click the backdrop or press Escape to close.</DockedDialog>

Offset

Sits slightly up and to the left of center for an off-axis stance.

import { OffsetDialog } from "@/components/ui/dialog-corner"

<OffsetDialog title="Dialog title">A self-contained modal that anchors to a screen edge. Click the backdrop or press Escape to close.</OffsetDialog>

ai2 Corner dialogs: 5 styled variations on the token system

The ai2 Corner dialogs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around edge-anchored modal dialogs. 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 each panel in from its anchored edge; 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 dialog fades or shows instantly.

What is in the ai2 Corner dialogs?

5 exports in one file: Top right, Bottom right, Top center, Docked and Offset. 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 each panel in from its anchored edge; the backdrop fades.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the dialog fades or shows instantly.
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 Corner dialogs 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.