Morphing Dialog

component

A fluid card-to-modal transition pattern. Combines Base UI's accessible dialog primitives with Framer Motion's shared layout animations for a seamless expansion effect. Inspired by Linear.

pnpm dlx shadcn@latest add "https://www.lumiui.dev/r/morphing-dialog.json"

Sign In

Morphing Dialog

component

A fluid card-to-modal transition pattern. Combines Base UI's accessible dialog primitives with Framer Motion's shared layout animations for a seamless expansion effect. Inspired by Linear.

pnpm dlx shadcn@latest add "https://www.lumiui.dev/r/morphing-dialog.json"

components/morphing-dialog.tsx