'use client'; import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { cva, type VariantProps } from 'class-variance-authority'; import { X } from 'lucide-react'; import { cn } from '@/lib/utils'; const ResponsiveModal = DialogPrimitive.Root; const ResponsiveModalTrigger = DialogPrimitive.Trigger; const ResponsiveModalClose = DialogPrimitive.Close; const ResponsiveModalPortal = DialogPrimitive.Portal; const ResponsiveModalOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalOverlay.displayName = DialogPrimitive.Overlay.displayName; const ResponsiveModalVariants = cva( cn( 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto', 'lg:left-[50%] lg:top-[50%] lg:grid lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%] lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0 lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:data-[state=closed]:slide-out-to-left-1/2 lg:data-[state=closed]:slide-out-to-top-[48%] lg:data-[state=open]:slide-in-from-left-1/2 lg:data-[state=open]:slide-in-from-top-[48%] lg:rounded-xl', ), { variants: { side: { top: 'inset-x-0 top-0 border-b rounded-b-xl max-h-[90%] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', bottom: 'inset-x-0 bottom-0 border-t lg:h-fit max-h-[90%] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', left: 'inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', right: 'inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', }, }, defaultVariants: { side: 'bottom', }, }, ); interface ResponsiveModalContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const ResponsiveModalContent = React.forwardRef< React.ElementRef, ResponsiveModalContentProps >(({ side = 'bottom', className, children, ...props }, ref) => ( {children} Close )); ResponsiveModalContent.displayName = DialogPrimitive.Content.displayName; const ResponsiveModalHeader = ({ className, ...props }: React.HTMLAttributes) => (

); ResponsiveModalHeader.displayName = 'ResponsiveModalHeader'; const ResponsiveModalFooter = ({ className, ...props }: React.HTMLAttributes) => (

); ResponsiveModalFooter.displayName = 'ResponsiveModalFooter'; const ResponsiveModalTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalTitle.displayName = DialogPrimitive.Title.displayName; const ResponsiveModalDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalDescription.displayName = DialogPrimitive.Description.displayName; export { ResponsiveModal, ResponsiveModalPortal, ResponsiveModalOverlay, ResponsiveModalTrigger, ResponsiveModalClose, ResponsiveModalContent, ResponsiveModalHeader, ResponsiveModalFooter, ResponsiveModalTitle, ResponsiveModalDescription, };

Responsive Modal

Installation

Paste this code into your project

Update import paths as needed

Usage

Side

Build Beautiful Interfaces LikeSpectrum UI for Your Product

Build Beautiful Interfaces Like
Spectrum UI for Your Product