Guide

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

Step-by-step setup

Initialize shadcn/ui

Skip this step if shadcn/ui is already initialized in your project.

bash

npx shadcn@latest init

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 popover

Install Tabler Icons

bash

npm install @tabler/icons-react

Add ytcn components

bash

npx shadcn@latest add https://ytcn.dev/r/player.json

Expected 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.ts

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" />
}

Introduction

Quick Start