[bug]: animation behavior for the Dialog component

[mo1nammad]

Describe the bug

The default animation behavior for the DialogContent component does not match the preview shown on the ShadCN UI website. The transition effect when opening and closing the dialog feels unnatural and creates an unpleasant user experience.

he following classnames are causing the unexpected animation behavior:

data-[state=closed]:slide-out-to-left-1/2 
data-[state=closed]:slide-out-to-top-[48%] 
data-[state=open]:slide-in-from-left-1/2 
data-[state=open]:slide-in-from-top-[48%]

• When the dialog opens, it slides in diagonally from the left and top, which feels jarring.
• When closing, it moves diagonally in the opposite direction, making the animation look unnatural.
• This behavior is inconsistent with the smooth, centered zoom-in/zoom-out effect shown in the preview.

I was able to fix this by removing the problematic classes and only keeping the zoom and fade animations:

Environment Tailwindcss : 4.0.6 tailwindcss-animate: "^1.0.7", tailwindcss: "^4.0.6", ShadCN UI latest version React :19

Affected component/components

Dialog

How to reproduce

Use the default Dialog component from ShadCN UI. Open and close the dialog multiple times. Notice the unexpected diagonal sliding effect.

Codesandbox/StackBlitz link

No response

Logs

System Info

Linux

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[dinkopehar]

Happens to me also while working. On https://ui.shadcn.com/docs/components/dialog it does not happen, copying the example (Custom Close Button) it slides from left top and slides back on pressing X.

[eposha]

The same issue

[Pety99]

Removing the classes fixed it for me too. Thanks!

[naturedamends]

Using the default

Edit: doing this works https://github.com/shadcn-ui/ui/issues/6536

        <DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Has no animate-in class for me. It has the animate-bounce class and bounce does work, but animate-in does not exist.

Add the classNames myself still does not work, because the css style does not exist.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
import path from "path"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

   "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-slot": "^1.1.2",
    "@tailwindcss/cli": "^4.0.8",
    "@tailwindcss/vite": "^4.0.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.476.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
    "tailwindcss-animate": "^1.0.7",


    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.19.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.9",

[Heher]

Just a heads up for anyone following this. I had originally manually copied the code for the Dialog using the "Manual" tab in the Installation section. I just used the CLI and copied the code it installed into my existing Dialog.tsx and it works normally now.

[cabello]

Ditto! I did not have this issue on tailwind v3, it showed up just after upgrading to v4. Removing the slide outs and in fixed the dialog, instead of sliding from the top-left down to the center, it just shows up by fading in.

[Naufal05R]

Resolved issue for me. Try to add these classNames to the DialogContent component:

data-[state=open]:animate-in 
data-[state=closed]:animate-out

along with

data-[state=closed]:slide-out-to-left-1/2 
data-[state=closed]:slide-out-to-top-[48%] 
data-[state=open]:slide-in-from-left-1/2 
data-[state=open]:slide-in-from-top-[48%]

Animation behavior should work well and look very nice.

[kein-1]

Ditto! I did not have this issue on tailwind v3, it showed up just after upgrading to v4. Removing the slide outs and in fixed the dialog, instead of sliding from the top-left down to the center, it just shows up by fading in.

This solved it for me too; I removed the slide-in classes inside DialogContent

[nirajrajgor]

This still happens if you install the component via command npx shadcn@latest add dialog. Just remove the classes if you don't need the animation from top right.

[jordihoven]

For anyone using Shadcn-vue, removing:

data-[state=closed]:slide-out-to-left-1/2 
data-[state=closed]:slide-out-to-top-[48%] 
data-[state=open]:slide-in-from-left-1/2 
data-[state=open]:slide-in-from-top-[48%]

from the DialogContent.vue file solves this issue.