Introduction
What ytcn is, why it exists, and when to use it.
What is ytcn?
ytcn is a copy-paste YouTube IFrame player component library built on shadcn/ui primitives. Instead of installing a package and fighting its API, you run one command and own the 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. You own them completely.
Design system native
Uses your shadcn tokens and Tailwind CSS variables. No extra theme configuration.
Zero branding
YouTube chrome is fully hidden — no red play button, no watermark, no related videos.
Honest about limits
The quality API is advisory. We document what works and what doesn't — clearly.
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 ytcn
| Use Case | Recommended? |
|---|---|
| LMS / course platform | ✅ Perfect fit |
| Portfolio with video | ✅ Great fit |
| Marketing site | ✅ Good fit |
| YouTube playlist browser | ❌ Use YouTube Data API |
| Guaranteed quality control | ❌ YouTube API cannot do this |
| React Native app | ❌ Web only |