Components
Loading preview...
Here is Dialog components
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-dialogimport { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
export default function Dialog18() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Upgrade plan</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Upgrade to Pro</DialogTitle>
<DialogDescription>
Unlock unlimited projects, priority support, and advanced analytics.
</DialogDescription>
</DialogHeader>
<div className="bg-muted/40 flex flex-col gap-1 rounded-lg border px-4 py-3">
<div className="flex items-baseline gap-1">
<span className="text-2xl font-semibold">$24</span>
<span className="text-muted-foreground text-sm">/ month</span>
</div>
<p className="text-muted-foreground text-xs">
Billed annually. Cancel anytime.
</p>
</div>
<DialogFooter className="flex-col gap-2 sm:flex-col">
<Button className="w-full">Upgrade now</Button>
<DialogClose asChild>
<Button variant="outline" className="w-full">
Maybe later
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}