Dialog

Extended dialog content with configurable size and position, built on the shadcn Dialog primitive.

Installation

bash

pnpm dlx shadcn@latest add @cs/dialog

tsx

import { Dialog, DialogTrigger } from "@/components/ui/dialog";
import { DialogContent } from "@/components/cs/dialog";

tsx

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent size="lg">Dialog content</DialogContent>
</Dialog>

Dialog content with configurable viewport position and maximum width.

Name	Type	Default	Description
description	ReactNode	-	Supporting text below the title.
headerClassName	string	-	Additional CSS classes applied to the dialog header.
position	"center" \| "left" \| "right" \| "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" \| null \| undefined	-	Positions the dialog within the viewport.
showCloseButton	boolean	-	Shows the built-in close button.
size	"xs" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "full" \| null \| undefined	-	Sets the dialog's maximum width or fills the viewport.
title	ReactNode	-	Dialog header title.

Name	Type	Default	Description
children	ReactNode	-	-
contentClassName	string	-	-
description	ReactNode	-	Supporting text below the title.
headerClassName	string	-	Additional CSS classes applied to the dialog header.
position	"center" \| "left" \| "right" \| "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" \| null \| undefined	-	Positions the dialog within the viewport.
showCloseButton	boolean	-	Shows the built-in close button.
size	"xs" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "full" \| null \| undefined	-	Sets the dialog's maximum width or fills the viewport.
title	ReactNode	-	Dialog header title.