Measured entry
kibo-video-player
A client-side React video player assembled from composable media-chrome controls and a native video element. It ships as a shadcn registry component, imports the project cn helper, and expects media-chrome plus Tailwind classes and shadcn-style theme variables backed by clsx and tailwind-merge.
Measured
Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | flagged at 375 |
| Axe critical | 0 |
| Axe serious | 0 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 73.5 KB (139.0 KB build, 65.5 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | written from the component source API |
Verdict
A sound composable shell that builds, mounts, and passes the automated accessibility check, but the supplied demo overflows on a narrow viewport and does not exercise real playback. Choose it when media-chrome fits your stack and you are prepared to make the control bar responsive.
Use it if
- You want a native video element with play, seek, time, mute, and volume controls that can be arranged independently.
- Your React app already uses Tailwind theme tokens and a shadcn-compatible cn utility.
- You prefer media-chrome behavior while keeping the visible control composition in your own source tree.
Skip it if
- You need the supplied layout to fit narrow screens without adjusting its container or control bar.
- You need captions, fullscreen, playback speed, or picture-in-picture controls without extending the exported component set.
- You already have a video solution and cannot justify another sizable client dependency.
- Your project avoids Tailwind theme variables, path aliases, or client-only React components.
Install
| Declared dependencies | media-chrome, clsx, tailwind-merge |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
Install media-chrome, clsx, and tailwind-merge. Add a cn utility, configure the @ path alias or replace that import, ensure Tailwind processes the component classes, define the referenced shadcn theme variables, and render it in a client-capable React boundary.
Source and credit
This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.
Author repository
github.com/shadcnblocks/kiboAlternatives
Other published entries for the video-player pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- hextaui-video-playerminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 30.5KB
- Bare
- fail
- Prov
- NO
- cultui-hover-video-playerliquid-glass
- Renders
- YES
- A11y
- 0
- Gzip
- 89.8KB
- Bare
- fail
- Prov
- NO