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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import {
Settings,
Bell,
Globe,
Shield,
} from 'lucide-react';
export default function QuickSettingsDialog() {
const [settings, setSettings] = React.useState({
notifications: true,
publicProfile: false,
twoFactor: true,
darkMode: false,
emailUpdates: true,
});
const toggleSetting = (key: string) => {
setSettings((prev) => ({
...prev,
[key]: !prev[key as keyof typeof settings],
}));
};
return (
<Dialog>
<DialogTrigger asChild >
<Button variant= "outline" > Quick Settings < /Button>
< /DialogTrigger>
< DialogContent className = "max-w-md" >
<DialogHeader>
<DialogTitle className="flex items-center justify-center sm:justify-start gap-2" >
<Settings className="h-5 w-5" />
Quick Settings
< /DialogTitle>
< DialogDescription > Manage your account preferences < /DialogDescription>
< /DialogHeader>
< DialogBody >
<div className="space-y-4" >
<div className="flex items-center justify-between" >
<div className="flex items-center gap-2" >
<Bell className="h-4 w-4" />
<span className="text-sm" > Push Notifications < /span>
< /div>
< Switch
checked = { settings.notifications }
onCheckedChange = {() => toggleSetting('notifications')
}
/>
< /div>
< div className = "flex items-center justify-between" >
<div className="flex items-center gap-2" >
<Globe className="h-4 w-4" />
<span className="text-sm" > Public Profile < /span>
< /div>
< Switch
checked = { settings.publicProfile }
onCheckedChange = {() => toggleSetting('publicProfile')}
/>
< /div>
< div className = "flex items-center justify-between" >
<div className="flex items-center gap-2" >
<Shield className="h-4 w-4" />
<span className="text-sm" > Two - Factor Authentication < /span>
< /div>
< Switch
checked = { settings.twoFactor }
onCheckedChange = {() => toggleSetting('twoFactor')}
/>
< /div>
< hr className = "my-4" />
<div className="flex items-center justify-between" >
<span className="text-sm" > Dark Mode < /span>
< Switch
checked = { settings.darkMode }
onCheckedChange = {() => toggleSetting('darkMode')}
/>
< /div>
< div className = "flex items-center justify-between" >
<span className="text-sm" > Email Updates < /span>
< Switch
checked = { settings.emailUpdates }
onCheckedChange = {() => toggleSetting('emailUpdates')}
/>
< /div>
< /div>
< /DialogBody>
< DialogFooter >
<DialogClose asChild >
<Button variant="outline" > Close < /Button>
< /DialogClose>
< DialogClose asChild >
<Button onClick={ () => alert('Settings saved!') }>
Save Changes
< /Button>
< /DialogClose>
< /DialogFooter>
< /DialogContent>
< /Dialog>
);
}