👉 How to Change the Size of a ShadCN Dialog Component ?

How to Change the Size of a ShadCN Dialog Component

ShadCN Dialog is a versatile component, but adjusting its size to fit custom content can be tricky. This guide explains how to customize the dialog size effectively.

Common Issues

Dialog Content Overflow: The content inside the dialog is larger than the default size.
Tailwind Classes Not Applied: Applying classes like w-full doesn’t work as expected due to ShadCN defaults.

Solution: Overriding Dialog Size

To customize the size of a ShadCN Dialog component, you need to modify the max-width property. Here’s how:

Example Code

'use client'

import React from 'react'
import Quizmodal from './_components/QuizModal'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

const Page: React.FC = () => {
  return (
    <div className="relative h-full w-full">
      <section className="flex h-full w-full justify-center py-5">
        <Dialog>
          <DialogTrigger asChild>
            <div className="group relative w-fit transition-transform duration-300 active:scale-95">
              <button className="relative z-10 rounded-lg bg-gradient-to-br from-indigo-500 to-fuchsia-500 p-0.5 duration-300 group-hover:scale-110">
                <span className="block rounded-md bg-slate-950 px-4 py-2 font-semibold text-slate-100 duration-300 group-hover:bg-slate-950/50 group-hover:text-slate-50 group-active:bg-slate-950/80">
                  Take Quiz
                </span>
              </button>
              <span className="pointer-events-none absolute -inset-4 z-0 transform-gpu rounded-2xl bg-gradient-to-br from-indigo-500 to-fuchsia-500 opacity-30 blur-xl transition-all duration-300 group-hover:opacity-90 group-active:opacity-50" />
            </div>
          </DialogTrigger>
          <DialogContent className="!max-w-[800px]">
            <Quizmodal />
          </DialogContent>
        </Dialog>
      </section>
    </div>
  )
}

export default Page

More Examples

Example 1: Fullscreen Dialog

For a dialog that takes up the entire screen, use:

<DialogContent className="h-screen !max-w-full">
  <YourComponent />
</DialogContent>

For a compact dialog, apply a smaller max-width:

<DialogContent className="!max-w-[400px]">
  <YourComponent />
</DialogContent>

For a responsive design, use media queries:

<DialogContent className="sm:!max-w-[90%] md:!max-w-[600px] lg:!max-w-[800px]">
  <YourComponent />
</DialogContent>

Example 4: Center-Aligned Dialog

Ensure proper alignment using utility classes:

<DialogContent className="mx-auto !max-w-[500px]">
  <YourComponent />
</DialogContent>

Key Adjustments

Custom Max-Width: Use !max-w-[size] to override default styles.
```
<DialogContent className="!max-w-[800px]">
```
This ensures your dialog resizes appropriately.
Tailwind’s Utility Classes: Ensure you use w-full or other width classes only where necessary, as ShadCN already applies default styles like w-full.
Responsive Design: Combine max-w-[size] with responsive utilities like sm:, md:, or lg:.
Example:
```
<DialogContent className="sm:!max-w-[90%] md:!max-w-[600px] lg:!max-w-[800px]">
```
Height Adjustments: If your content requires more height, use h-[size] or !h-[size] as needed.
```
<DialogContent className="!max-w-[600px] !h-[500px]">
```

FAQs

1. Why doesn’t w-full resize my dialog? ShadCN Dialog applies default w-full styles. To override, use !max-w-[size] or !w-[size].

2. Can I make the dialog fullscreen? Yes, use the !max-w-full class:

<DialogContent className="!max-w-full">

3. How do I ensure the dialog content is scrollable? Wrap the content in a scrollable container:

<DialogContent className="!max-w-[600px]">
  <div className="max-h-[500px] overflow-y-auto">
    <YourComponent />
  </div>
</DialogContent>

4. How do I test the design for responsiveness? Use browser developer tools to preview and adjust dialog sizes across different screen sizes.

Conclusion

Customizing the size of a ShadCN Dialog component is straightforward with Tailwind’s utility classes. By overriding properties like max-width and combining responsive utilities, you can create dialogs that fit your design needs. Add height adjustments and scrollable containers for enhanced user experience.