KQ-349 · TURN/MODAL

Turn Modal

A card that lifts, travels to the centre, and turns over on Y into a focus-trapped dialog — the flip and the travel are one motion, so the dialog face comes around mid-flight and is never visible early. Closing reverses the same path back to the card. Where morph-dialog reshapes the trigger into the dialog, this one turns it over, which is the right device when the card and the dialog are two faces of the same object.

KQ-349 · TURN/MODAL

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/turn-modal

Props

front: React.ReactNode; default —; The card face at rest.
title: string; default —; Accessible name of the dialog face.
open: boolean; default —; Controlled open state; pair with onOpenChange.

Prop	Type	Default	Description
front	React.ReactNode	—	The card face at rest.
title	string	—	Accessible name of the dialog face.
open	boolean	—	Controlled open state; pair with onOpenChange.