Modal

A sophisticated modal component with Vercel-inspired design. Features multiple variants, smooth animations, and excellent accessibility support for dialogs, confirmations, and forms.

Basic Usage

Variants

Use Cases

Sizes

Configuration

Modal Options

Behavior

  • • closeOnOverlayClick
  • • closeOnEscape
  • • showCloseButton
  • • initialFocus

Styling

  • • size (xs to 4xl, full)
  • • variant (default, modern, minimal, elevated)
  • • Custom className
  • • Responsive sizing
Modal Component
tsx
1"use client";
2

3import { ReactNode, useEffect, forwardRef } from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/lib/cn";
6import { X } from "lucide-react";
7

8const modalOverlayVariants = cva([
9  "fixed inset-0 z-50 flex items-center justify-center p-4",
10  "bg-black/80 backdrop-blur-sm",
11  "transition-all duration-300 ease-out",
12  "animate-in fade-in-0",
13]);
14

15const modalContentVariants = cva(