Introduction
Copy-paste YouTube player components for React. Zero branding, full control, built on shadcn/ui.
What is ytcn?
ytcn is a set of copy-paste YouTube IFrame player components built on shadcn/ui primitives. Instead of installing a package and fighting its API, you run one CLI command and own the source code. Every component lands in your project — you can read, modify, and extend it without forking a library.
The shadcn philosophy
Core Principles
Copy, don't install
Components live in your codebase. Full ownership, zero lock-in.
Design system native
Uses your existing shadcn tokens and Tailwind CSS variables. No extra theme configuration needed.
Zero YouTube branding
YouTube chrome is fully hidden — no red play button, no watermark, no related videos overlay.
TypeScript first
Strict types throughout. Every prop, state field, and control method is fully typed with JSDoc.
Philosophy
Most YouTube player libraries are black boxes. You install them, wrap your video ID in a component, and hope the API does what you need. When it doesn't — and it always doesn't eventually — you're stuck filing issues and waiting for maintainers.
ytcn takes a different approach. Every component is a plain React file in your project. The YouTube IFrame API complexity is contained in hooks that you can read, debug, and extend. The UI layer uses the same shadcn/ui primitives you already know — Button, Slider, Popover — so it inherits your theme with zero extra configuration.
The tradeoff is intentional: you get full control at the cost of owning the code. For teams building products where video is a core feature — LMS platforms, course builders, portfolio sites — this tradeoff is almost always worth it.
When to Use
| Use Case | Fit |
|---|---|
| LMS / course platform | ✅ Perfect fit |
| Portfolio with video | ✅ Great fit |
| Marketing site | ✅ Good fit |
| YouTube playlist browser | ❌ Use YouTube Data API |
| React Native app | ❌ Web only |