Render a route as a modal over the list

At a glanceCopy Anchor Link

• Who: Developers opening list details in an overlay with a shareable URL (Next.js parallel/intercepting routes).
• What: A route-driven modal (right drawer or centered dialog) that plays its exit before navigating back, with a list fallback.
• Use when: Inside an intercepting @modal slot, with onClose wired to closeRoute.
• Avoid when: For state-driven modals — use Dialog/Drawer directly with local state.
• See also: Slide in a drawer panel, Open modal dialogs, Confirm destructive actions

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.4.0 (via changesets).

ExampleCopy Anchor Link

import { RouteModal, closeRoute } from "@zedtech/zedkit-ui";
import { useRouter } from "next/navigation";
const router = useRouter();
<RouteModal title="Delivery" onClose={() => closeRoute({ ...router, fallback: "/items" })}>
  <DetailView />
</RouteModal>

Wraps: (none)

PropsCopy Anchor Link