Create Your Own Shadcn/UI Block & Install It via CLI

You can share your own custom ShadCN UI components (blocks) and let anyone install them with:
npx shadcn-ui add (your-component-url)

In this video, I’ll show you how to create and publish your own ShadCN component block, step by step

What you'll learn:
1. How to generate a new Next.js project (App Router, Tailwind CSS, TypeScript)
2. Build a reusable quote-card component using shadcn/ui
3. Export the component as a JSON registry file
4. Deploy your JSON and component files to Vercel (or any hosting)
5. Clone it.

live: https://quote-card-two.vercel.app/

💻 Tools Used:
Next.js (App Router): https://nextjs.org/
Tailwind CSS: https://tailwindcss.com/
shadcn/ui CLI: https://ui.shadcn.com/
Vercel (for hosting): https://vercel.com/
Json Escape: https://jsonformatter.org/json-escape

medium blog:
https://medium.com/@ckriswinarto/create-your-own-shadcn-ui-block-install-it-via-cli-4c9706e08d9b

🌐 Check out more content:
- My Portfolio: https://www.cand.site/
- Medium: https://medium.com/@ckriswinarto

💻 Get the Source Code:
* GitHub: https://github.com/candraKriswinarto/quote-card

🌐 Recommended Digital Tools (Affiliate Links):
- Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU

👍 If you found this video helpful, please like, and subscribe!

❓ Any questions? Drop them in the comments

Видео Create Your Own Shadcn/UI Block & Install It via CLI канала Cand Dev