Media Modal Default

modals

Ui-Layouts component.

responsive · 680px

Install

Same command in any shadcn project — React (Vite/CRA), Next.js, Remix, Astro, and more:

$npx shadcn@latest add https://your-domain/r/media-modal-default.json

Usage

import Cmp from "@/registry/ui-layouts/media-modal-default";

export default function Demo() {
  return <Cmp />;
}

Component source

import { MediaModal } from '@/registry/ui-layouts/media-modal';

export default function Dialog() {
  return (
    <div className='relative h-full'>
      <div className='grid grid-cols-2 gap-2 h-full'>
        <MediaModal
          imgSrc={
            'https://images.unsplash.com/photo-1726824766931-4bd8b59af37c?q=80&w=1000&auto=format&fit=cropD'
          }
        />
        <MediaModal
          videoSrc={'https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4'}
        />
      </div>
    </div>
  );
}

Dependencies

motionlucide-react

Source: Ui-Layouts