Background Media
Full screen image or video background for React and shadcn/ui with a light or dark overlay and a play and pause control.
Updated
BgMedia is a React background component for shadcn/ui. Use it for landing page heroes, event pages, or portfolio intros that lead with photography or footage.
Installation
pnpm dlx shadcn@latest add @cult-ui/bg-media
Usage
import BackgroundMedia from "@/components/ui/bg-media";
export default function BgMediaDemo() {
return (
<div className="w-full ">
<div className="min-w-[20rem] md:min-w-[40rem] lg:md:min-w-[50rem]">
<BackgroundMedia
type="video"
variant="light"
src="https://openaicomproductionae4b.blob.core.windows.net/production-twill-01/c74791d0-75d2-48e6-acae-96d13bc97c56/paper-planes.mp4"
/>
</div>
</div>
);
}