Dialog

A collection of reusable dialog (modal) components built with Radix UI and Tailwind CSS, designed for accessibility and various e-commerce use cases.

Features

• Accessible: Full keyboard navigation, ARIA roles, focus trapping, and screen reader support
• Multiple Sizes: Small (alerts), medium (forms), large (cart preview), and more
• Smooth Animations: Built-in transitions using Tailwind CSS animations
• Responsive Design: Mobile-friendly with optional full-screen mode
• Composable: Works seamlessly with other ShadCN components
• Type Safe: Full TypeScript support with proper type definitions

Installation

pnpm dlx shadcn@latest add https://gfed-registry.vercel.app/r/dialog.json

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';

import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog description goes here.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Examples

Default

Confirmation Dialog

Form Dialog

Information Dialog

Cart Preview Dialog

Size Variants

• sm - 384px max width (good for alerts)
• md - 448px max width (default, good for forms)
• lg - 512px max width (good for detailed forms)
• xl - 576px max width
• 2xl - 672px max width
• 3xl - 768px max width
• full - Almost full viewport (good for mobile)