Adding Margin to Shadcn Dialog Component for Mobile Screens

When designing responsive user interfaces, it’s crucial to ensure that dialog components display properly on smaller screens. Shadcn’s Dialog component, built on Tailwind CSS and Radix, comes with default styles that sometimes need adjustment for mobile screens. If you’ve struggled to add margin to a dialog box, this guide will show you how to achieve the desired result.

The Problem

By default, the Shadcn DialogContent component uses predefined max-w-lg or max-w-md classes for controlling its width. While these styles work well for desktops, they often need tweaking for mobile views to include proper margins (mx-* in Tailwind CSS). Attempting to add mx-5 directly to the component might not work due to the way the styles are structured.

Solutions

1. Adjusting Width with Tailwind Classes

Adding a width class like w-11/12 ensures that the dialog has a smaller width and inherits margins naturally. This technique provides the required spacing without overriding the default styles.

Example:

<DialogContent className="w-11/12 sm:max-w-md">

This ensures:

• w-11/12: The dialog takes up 11/12 of the screen width, leaving natural margins.
• sm:max-w-md: For screens larger than sm, the maximum width is capped at max-w-md.

2. Using Tailwind’s calc Function

For precise control, you can use Tailwind’s calc function to calculate the width dynamically. For example:

Example:

<DialogContent className="w-[calc(100%-64px)]">

This calculation ensures that the dialog width is reduced by 64px, creating a 32px margin on both sides.

3. Customizing the Dialog Component

If you need a consistent margin across your project, you can customize the dialog component directly in your codebase. However, avoid editing the source library files as it makes future updates harder to manage.

Example:

import { DialogContent } from '@shadcn/ui/dialog'

const CustomDialogContent = ({ children, ...props }) => {
  return (
    <DialogContent className="mx-auto w-11/12 sm:max-w-md" {...props}>
      {children}
    </DialogContent>
  )
}

export default CustomDialogContent

Then, use the CustomDialogContent component instead of the default DialogContent.

Complete Implementation Example

Here’s a full example of a Shadcn Dialog component with proper margins for mobile screens:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@shadcn/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export default function ResponsiveDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="w-11/12 sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Responsive Dialog</DialogTitle>
          <DialogDescription>
            This dialog demonstrates proper margins on mobile screens.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <Input placeholder="Enter your input here" />
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="secondary">Cancel</Button>
          </DialogClose>
          <Button>Submit</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Key Notes

• Avoid Editing Library Source Code: While directly modifying the library source files may seem like a quick fix, it’s not recommended as it complicates future updates.
• Leverage Utility Classes: Tailwind CSS provides powerful utility classes like w-* and max-w-* to handle responsive design effectively.
• Customize Responsively: Use responsive prefixes like sm:, md:, and lg: to apply different styles based on screen size.

Conclusion

Adding proper margins to Shadcn Dialog components for mobile screens can be easily achieved by adjusting the width or using calculated values with Tailwind CSS. These techniques ensure a better user experience and maintain the responsive integrity of your design.

Key Takeaways:

• Use w-11/12 or w-[calc(100%-64px)] to set margins dynamically.
• Customize the dialog component locally for consistent styling.
• Avoid direct modifications to the library source files.

Implement these strategies to enhance the responsiveness of your Shadcn Dialog components today!