Responsive dialogoverlay

One dialog API that renders a Dialog from 768px up and a bottom Drawer below, with Back-button close, sticky footer and a full-screen mobile variant.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/responsive-dialog

의존 아이템button dialog drawer locale style

Default

responsive-dialog-demo.tsx

import { Button } from "@/components/ui/button";import { ResponsiveDialog } from "@/components/ui/responsive-dialog";
export default function ResponsiveDialogDemo() {  return (    <ResponsiveDialog      trigger={<Button variant="outline">Edit guest</Button>}      title="Edit guest"      description="Changes apply to this booking only."      footer={<Button>Save</Button>}    >      <p className="text-sm text-muted-foreground">Form fields go here.</p>    </ResponsiveDialog>  );}