Video Card

A YouTube card that stays cheap until it is wanted. The player only mounts on click, so a page full of these costs nothing on load.

SurfacesClient componentlucide-react

Preview

Blender Foundation

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/video-card

Pulls in @duck/theme. Already installed items are skipped.

import { VideoCard } from "@/components/ui/video-card"

The file lands in components/ui/video-card.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
videoId	string	-	The part of the URL after v=.
title	string	-	Card heading and iframe title.
channel	string	-	Line under the title.
duration	string	-	Runtime label, for example "12:04".
thumbnail	string	-	Override the default YouTube poster.
holo	boolean	false	Iridescent frame.