Getting Started
Installation
Set up ytcn in your project in under 2 minutes.
Prerequisites
| Prop | Type | Default | Description |
|---|---|---|---|
| React | 18+ | — | Hooks required |
| TypeScript | 5+ | — | Strict mode recommended |
| Tailwind CSS | 3.4+ | — | CSS variables required |
| shadcn/ui | Latest | — | Must be initialized first |
| Node.js | 18+ | — | LTS recommended |
React
18+
Hooks required
TypeScript
5+
Strict mode recommended
Tailwind CSS
3.4+
CSS variables required
shadcn/ui
Latest
Must be initialized first
Node.js
18+
LTS recommended
Step-by-step setup
1
Initialize shadcn/ui
Skip this step if shadcn/ui is already initialized in your project.
bash
npx shadcn@latest init2
Install required shadcn primitives
ytcn uses Button for controls, Slider for volume and progress, Popover for speed picker — all portaled into the player container so they're visible in fullscreen mode.
bash
npx shadcn@latest add button slider popover3
Install Tabler Icons
bash
npm install @tabler/icons-react4
Add ytcn components
bash
npx shadcn@latest add https://ytcn.dev/r/player.jsonExpected file tree after installation:
Project structure
components/ytcn/
├── ytcn-player.tsx
├── ytcn-controls.tsx
├── ytcn-progress.tsx
├── ytcn-volume.tsx
├── ytcn-speed.tsx
├── ytcn-fullscreen.tsx
├── ytcn-loader.tsx
└── ytcn-overlay.tsx
hooks/ytcn/
├── use-ytcn-player.ts
├── use-thumbnail.ts
├── use-idle-controls.ts
└── use-keyboard-shortcuts.ts
lib/ytcn/
├── loader.ts
├── format.ts
└── types.ts5
Verify installation
Create a simple page to verify everything works:
app/page.tsx
import { YtcnPlayer } from "@/components/ytcn/ytcn-player"
export default function Page() {
return <YtcnPlayer videoId="dQw4w9WgXcQ" />
}