Video · Marketing & editorial
Video card
Versatile YouTube-style video item with vertical, compact, horizontal, overlay, and featured variants, composing a thumbnail, channel byline, custom badges/stats/actions, description, and overflow menu.
@byronwade/foundation@byronwade/thumbnail@byronwade/verified-badge@byronwade/avatar@byronwade/dropdown-menu@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Horizontal, Overlay, Featured.
Tagged for youtube, video, tier:intermediate
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "compact" | "horizontal" | "overlay" | "featured" | default | Switches between feed tile, compact tile, row, overlay, and featured treatments. |
| size | "sm" | "md" | "lg" | md | Controls title and avatar scale. |
| density | "comfortable" | "compact" | comfortable | Tightens spacing for dense surfaces. |
| title | string | - | Video title. |
| channelName | string | - | Channel display name. |
| thumbnailSrc | string | - | Poster image URL. |
| views | number | - | View count for meta line. |
| description | ReactNode | - | Optional search/featured-card supporting copy. |
| badges | ReactNode | - | Optional label row above the title. |
| stats | ReactNode | - | Custom meta line replacing views/timestamp. |
| actions | ReactNode | - | Inline action slot beside the body. |
| menuItems | OverflowMenuItem[] | - | Overflow ⋮ menu entries. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/thumbnail | registry | Installed through the byronwade/ui registry. |
| @byronwade/verified-badge | registry | Installed through the byronwade/ui registry. |
| @byronwade/avatar | registry | Installed through the byronwade/ui registry. |
| @byronwade/dropdown-menu | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/video-card.tsx |
| Default example | content/examples/video-card/default.tsx |
| Horizontal example | content/examples/video-card/horizontal.tsx |
| Overlay example | content/examples/video-card/overlay.tsx |
| Featured example | content/examples/video-card/featured.tsx |