UI · Application UI
Thumbnail
Video thumbnail tile with optional duration pill, watched-progress bar, and live chip.
@byronwade/foundation@byronwade/aspect-ratio@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
1 example
Default.
Tagged for youtube, video, tier:simple
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Thumbnail image URL. |
| duration | string | - | Optional duration pill label (e.g. 12:34). |
| progress | number | - | Watched progress 0–100 for the bottom bar. |
| live | boolean | - | Show the LIVE chip overlay. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/aspect-ratio | 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/ui/thumbnail.tsx |
| Default example | content/examples/thumbnail/default.tsx |