fix: dialog are zooming in from top-left instead of center

[brandon-julio-t]

Description

Fixed Dialog and AlertDialog that are zooming in from top-left instead of center

Fixes #5

Screenshots/Videos

fixed.mp4

fixed.alert.dialog.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
app-tailwind-v4	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2025 9:53am

[amanpatel]

Nice catch

[shadcn]

Thanks. Looks like we do lose some subtle animations by removing the classes but tailwindcss-animate needs some work for v4. I'm looking into this.

[pippinmole]

Thank you for this

[composite]

@shadcn I checked the tailwindcss-animate repository and it looks like there hasn't been any activity since 2 years, so it's not a good idea to wait for an update to this package.

[brandon-julio-t]

another solution (my 2 cents) that I’m thinking is to just change from -1/2 and -[48%] into pixel values, because using those values mean the dialog is moving from it’s origin coordinate or it’s own height/width, hence the zooming in from top-left. This is what is in my head, hence the solution that I can think of is remove the class names, or try some pixel values for subtle animation.

But all in all, I still don’t know why it works in tailwindcss 3, but not in tailwindcss 4, maybe something to do with the update from using -[--cssvar] syntax into -(cssvar), usually that’s the most disrupting changes in my apps

btw me personally cannot see the “subtle” animation, so I don’t know how many pixel will fit into the “subtle” animation.

[Kamahl19]

@shadcn have you seen the https://github.com/Wombosvideo/tailwindcss-animate-v4 or https://github.com/nobie-org/tailwindcss-animate . The first one seems best suited for v4

[zbeyens]

Fixed by:

1. Pasting https://github.com/Wombosvideo/tailwindcss-animate-v4/blob/main/tailwindcss-animate.css into globals.css
2. Replace data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%] with data-[state=open]:slide-in-from-top-48% data-[state=closed]:slide-out-to-top-48%

[brandon-julio-t]

Fixed by:

1. Pasting https://github.com/Wombosvideo/tailwindcss-animate-v4/blob/main/tailwindcss-animate.css into globals.css
2. Replace data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%] with data-[state=open]:slide-in-from-top-48% data-[state=closed]:slide-out-to-top-48%

I think this is the best fix, we’ll change:

• slide in/out top: [48%] into 48% (remove bracket)
• slide in/out left: -1/2, we’ll change into -50% (1/2 into 50%)

and it’ll animate properly

updated in 444ccf4

1.mp4

[QuangPhamvt]

Description

Fixed Dialog and AlertDialog that are zooming in from top-left instead of center

Fixes #5

Screenshots/Videos

fixed.mp4
fixed.alert.dialog.mp4

i like it,
tks u very much

[mirandajignacio]

thank you! you save my life

[brandon-julio-t]

just letting you guys know that shadcn has published the v4 over here

https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/dialog.tsx

[brandon-julio-t]

resolved in latest shadcn/ui
closing to keep things clean