Docs
Dialog
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/default/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@repo/tailwindcss/default/dialog";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const DialogDemo = () => {
return (
<Dialog>
<DialogTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
Edit Profile
</Button>
)}
/>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<DialogFooter>
<Button type="submit">Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default DialogDemo;import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/solid/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@repo/tailwindcss/solid/dialog";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const DialogDemo = () => {
return (
<Dialog>
<DialogTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
Edit Profile
</Button>
)}
/>
<DialogContent class="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<DialogFooter>
<Button type="submit">Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default DialogDemo;Installation
npx shadcn-solid@latest add dialogInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger
} from "@/components/ui/dialog";<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>