Install Clerk Using Shadcn Registry

Learn how to add Clerk authentication to your Next.js app using the new Shadcn Registry integration. Install pre-built auth components, pages, and config with the familiar shadcn add command. Get a complete auth setup in seconds or add components individually.

🚀 Try Clerk for free: https://clerk.com
📚 Clerk shadcn registry: https://clerk.com/docs/guides/development/shadcn-cli

⏱️ CHAPTERS
0:00 Introduction - Clerk + Shadcn Registry
0:35 Quick Start Package Overview
1:15 Individual Components & Pages
1:40 Understanding Shadcn Namespaces
2:19 Creating a Brand New Next.js App
2:50 Installing Shadcn UI
3:15 Adding Clerk Namespace to Registry
3:35 Running the Quick Start Command
4:05 Testing Light & Dark Theme Support
4:30 Keyless Sign-In & Claiming Your App

📦 WHAT YOU'LL BUILD
✅ Next.js app with Clerk authentication
✅ Pre-configured sign-in & sign-up pages
✅ Header with auth components
✅ ClerkProvider setup
✅ Middleware configuration
✅ Environment variables
✅ Light & dark theme support

🔧 KEY CONCEPTS COVERED
⦿ Shadcn Registry namespaces
⦿ Quick start package vs individual components
⦿ Adding clerk namespace to components.json
⦿ shadcn add @clerk/next-quickstart command
⦿ Pre-built auth pages (sign-in, sign-up, waitlist)
⦿ ClerkProvider component integration
⦿ Middleware setup
⦿ Keyless sign-in for testing
⦿ Claiming your Clerk application

💡 WHAT'S INCLUDED
✨ Clerk package installation
✨ Environment variables template
✨ ClerkProvider in layout
✨ Middleware configuration
✨ Sign-in & sign-up pages
✨ Header with UserButton
✨ Theme provider (light/dark)

🛠️ TECH STACK
Next.js (App Router)
Clerk (@clerk/nextjs)
Shadcn UI
TypeScript

📚 AVAILABLE COMPONENTS
Quick Start: shadcn add @clerk/next-quickstart
Sign In Page: shadcn add @clerk/sign-in-page
Sign Up Page: shadcn add @clerk/sign-up-page
Waitlist: shadcn add @clerk/waitlist
ClerkProvider: shadcn add @clerk/clerk-provider
Middleware: shadcn add @clerk/middleware

📚 LINKS & RESOURCES
Clerk Shadcn Registry Docs: https://clerk.com/docs/guides/development/shadcn-cli
Start Free (10,000 MAUs): https://clerk.com
Next.js Documentation: https://nextjs.org/docs

🎯 PERFECT FOR
Developers using Shadcn UI
Teams building MVPs needing auth fast
Next.js projects wanting consistent design
Anyone familiar with Shadcn CLI
Projects needing quick auth integration

🔥 PRO TIPS
Add the clerk namespace once, use it everywhere
Quick start gets you 80% there in one command
Keyless sign-in lets you test immediately
Add individual components for granular control
Theme support works out of the box
Claim your app later with real API keys

💬 Questions? Drop them in the comments!
👍 Find this helpful? Like & subscribe for more Clerk tutorials
🔔 Turn on notifications for new authentication videos

#clerk #shadcn #nextjs #react #authentication #webdev #javascript #tutorial #ui

Видео Install Clerk Using Shadcn Registry канала Clerk