Components
Loading preview...
a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.
npx shadcn@latest add https://21st.dev/r/sshahaider/dialogimport React from 'react';
import {
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Info } from 'lucide-react';
export default function AppInfoDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">App Info</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Info className="text-primary h-5 w-5" />
About This App
</DialogTitle>
</DialogHeader>
<DialogBody>
<div className="space-y-4">
<div className="mb-6 flex items-center gap-3 text-center">
<div className="bg-muted flex h-16 w-16 items-center justify-center rounded-full">
<span className="text-primary text-2xl font-bold">A</span>
</div>
<div>
<h3 className="text-xl font-semibold">My App</h3>
<p className="text-muted-foreground text-sm">Version 2.1.0</p>
</div>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Last Updated:</span>
<span>July 20, 2025</span>
</div>
<div className="bg-border h-px w-full" />
<div className="flex justify-between">
<span>Size:</span>
<span>24.5 MB</span>
</div>
<div className="bg-border h-px w-full" />
<div className="flex justify-between">
<span>Developer:</span>
<span>Your Company</span>
</div>
<div className="bg-border h-px w-full" />
</div>
<div className="text-muted-foreground text-xs">
<p className="mb-2">
This application helps you manage your projects and collaborate
with your team efficiently.
</p>
<p>© 2025 Your Company. All rights reserved.</p>
</div>
</div>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Close</Button>
</DialogClose>
<Button onClick={() => alert('Checking for updates...')}>
Check for Updates
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}