Dialog
Modal that opens with a box wipe and switches off like a CRT.
Installation
npx shadcn@latest add @vinyl/dialogUsage
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Insert tape</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Be kind, rewind</DialogTitle>
<DialogDescription>This tape is at the end of side B.</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>API
- Web: the content opens with
animate-wipe-boxand closes with a reversedbarn-door-h(they use different keyframes so Radix waits for the exit animation). The overlay has scanlines. PassshowCloseButton={false}to hide the ✕. - Native: a custom Reanimated entering/exiting animation scales a thin line open (CRT power-on), then collapses it on close. It's disabled under reduced motion.