Video · Marketing & editorial
Shorts player
Versatile YouTube Shorts-style 9:16 player with preview and immersive variants, configurable engagement rail placement, caption modes, status/top-action slots, and replaceable author/overlay content.
@byronwade/foundation@byronwade/action-rail@byronwade/avatar@byronwade/verified-badge@byronwade/button@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
3 examples
Default, Preview, Immersive.
Tagged for youtube, video, tier:advanced
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "preview" | "immersive" | default | Controls the frame treatment. |
| rail | "right" | "left" | "hidden" | right | Places or hides the engagement rail. |
| density | "comfortable" | "compact" | comfortable | Tunes overlay spacing and caption scale. |
| captionMode | "clamped" | "expanded" | "hidden" | clamped | Controls caption visibility and line clamp. |
| author | ShortsAuthor | - | Required author identity. |
| src | string | - | Video source URL. |
| like | ToggleState | - | Grouped like toggle for the action rail. |
| play | ToggleState | - | Grouped play/pause for built-in video. |
| caption | ReactNode | - | Bottom caption overlay. |
| authorAction | ReactNode | - | Custom author action replacing the built-in follow button. |
| topActions | ReactNode | - | Custom controls near the top edge. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/action-rail | registry | Installed through the byronwade/ui registry. |
| @byronwade/avatar | registry | Installed through the byronwade/ui registry. |
| @byronwade/verified-badge | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | 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/shorts-player.tsx |
| Default example | content/examples/shorts-player/default.tsx |
| Preview example | content/examples/shorts-player/preview.tsx |
| Immersive example | content/examples/shorts-player/immersive.tsx |