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 {
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';
export default function WithForm() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Form</Button>
</DialogTrigger>
<DialogContent>
<form
onSubmit={(e) => {
e.preventDefault();
alert('Form submitted!');
}}
>
<DialogHeader>
<DialogTitle>Edit Profile</DialogTitle>
<DialogDescription>
Update your name and username.
</DialogDescription>
</DialogHeader>
<DialogBody className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" defaultValue="Pedro Duarte" />
</div>
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Input id="username" defaultValue="@peduarte" />
</div>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button type="submit">Save</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}