Video · Marketing & editorial
Video shelf
Versatile video content section with carousel, grid, rail, and stack layouts plus optional header copy, empty/loading states, item sizing, and scroll controls.
@byronwade/foundation@byronwade/skeleton@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Grid, Rail, Watch Page.
Tagged for youtube, video, tier:intermediate
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "carousel" | "grid" | "rail" | "stack" | carousel | Controls the shelf layout. |
| density | "comfortable" | "compact" | comfortable | Controls header and item spacing. |
| controls | "hover" | "always" | "none" | hover | Controls horizontal scroll-button visibility. |
| title | ReactNode | - | Optional shelf heading. |
| description | ReactNode | - | Optional copy under the title. |
| action | ReactNode | - | Trailing header action. |
| empty | ReactNode | - | State rendered when no children are provided. |
| loading | boolean | - | Render skeleton placeholders instead of children. |
| children | ReactNode | - | Shelf items. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/skeleton | 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-shelf.tsx |
| Default example | content/examples/video-shelf/default.tsx |
| Grid example | content/examples/video-shelf/grid.tsx |
| Rail example | content/examples/video-shelf/rail.tsx |
| Watch Page example | content/examples/video-shelf/watch-page.tsx |