Shadcn + Next.js 13 is HEAVEN | A QUICK GUIDE

Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
Shadcn is becoming my new favourite way to build out UI's together with Tailwind. In today's episode i'll just show you a quick walktrough on how you can add themes, add a dark mode and show you the process on how you can install components in your Next 13 app.
ui.shadcn.com/
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
-------------------------------------------------------------------------------------------------
🎶 Dope music
C Y G N - Bikini Palm-trees chll.to/d0798a7f
C Y G N - Emotions chll.to/bfeb2b66
C Y G N - Let it go chll.to/41ba6c49
#react #tailwindcss #shadcn

[@developedbyed]

The Next.js 13 course is getting closer to be released, it will be completely revamped with shadcn + tRPC/server actions and a couple of entirely new chapters! Thanks for everything ✨✨

[@marvinkr]

Haha loved the button pun 😂 Will the course also include Tanstack & Driizzle?

[@developedbyed]

Yeah both of these!

[@Zaromir]

my body is so ready

[@zdmgy3778]

I need a specific time.😀

[@trburaktr16]

When will the course be updated? I can't wait to buy it.

[@csy897]

I tried to make shadcn for the app my department is working on. My company tried to make a shadcn for the company. And then I saw this and I just... wow. This bloke is gold.

[@randerins]

It really is! I've applied this combination on certain projects and it's SO simple to program with!

[@sjonny-depp]

Yes, but can be way too much overwhelming with huge chunks of code for a simple dropdown or button.

[@fbenfrank]

@@sjonny-deppyou always have the option to code it yourself.

[@thedude6810]

holy moly, i thought i was gonna have to go with mui. Shadcn looks like the right way to go

[@padione3540]

Awesome video, will try it in my next project! It’s gonna be a huge time saver

[@aymaneamen5854]

looks awesome, I will give it a shot !

[@danielparagas576]

The disappearing effect on switching modes made me subscribe liked the video 🤣

[@Beast80K]

Sir, Have you tried NextUI ? Should I go with NextUi or shadcn ?

[@MChiemelie]

This is a really great man!

[@ebubekiryazgan]

Yessss here is the video I wanted

[@naveenalla3000]

Wonderful definitely I should make use of it

[@maherylala2153]

You know it's good when the account has Morty as a pp

[@y0ake77]

Very helpful❤

[@moerv673]

Which vscode extensions and theme are u using? Everything’s so smooth :)

[@booom5572]

Bump! What theme is this!

[@АлександрМерный-м1ч]

nice to hear that author voice and "clean" English.

[@youtubevanched7665]

Which VSCode theme you are using ?

[@niteshbabu5731]

One quick fix, in the zod section you said that the username is looking for not more than 5 chars buts it's the opposite, it's looking for min 5 chars in it

[@MohammadSadiqu]

This is awesome

[@stanislavvranic1745]

Suggestion for one of the next videos. ShadeCN + Storybook.

[@anonymoussloth6687]

For the custom theme, we need to copy paste it like u did for red. Is there a way to do it based on user input like in the website? The user will click red, blue, orange, etc and it will change accordingly

[@Houseofstartup]

Same question

[@kiranojha8811]

You'll have to keep track of multiple theme variables and use js to dynamically change that

[@santoshkumarmarar7048]

Can you please make video on shadcn ui form and how to integrate select,radio, and checkbox in form

[@z1982_]

Hi, can we use theming colors if we opted for utility class instead of css variables ?

[@cristiancirje]

Great video! What's the name of the VSC theme?

[@flnnx]

It seems pretty neat. I'll give it a try for my next project

[@ajndlajjnl4175]

Hi ed. I ve a question i use angularfor client sode dev and i want to move to nextjs. Do i have to learn reactjs then pass to nextjs or nah!

[@gwemula]

00:25 | Your face scared me a little 🤣

[@aarondiaz2506]

yep it is 😊

[@kurifurikurifuri]

Is there any guide for designers? (like all about Figma stuff and etc.) We're building a new product and our team decided to use an open-source design-system, so im on it. But all I've found about shadcn is dozen tons of developer stuff (and poor design file in Figma Community) and as you can guess I don't give a hack what all of this means. So I'm just interested of what kind of adjustments I can do and how the handoff process using this library is organised at all.

[@FzsHotDogInDonut]

How do I add all the color options available for end user?

[@anonymoussloth6687]

Same question

[@xhurish]

Could you help me with something, the shad cn components are styling properly if theyre used within the app folder but not if theyre used on a pages folder, i also added the routes to the css config but it still remains broken, how comd

[@mahadsaleem9317]

6:53 how is he getting these suggestions is there a vs code extension for this or what?

[@funfacts9668]

Sir please make a complete course on GSAP with Three JS

[@btssugahit4663]

Seriously threejs is giving me headaches and heart attacks

[@KISSUKUU]

​@@btssugahit4663😂 Yeah Same here

[@RupaDevi-j1k]

Hey how can build array Tags Ui using shadcn

[@Siddu7987]

which one to use Radix Themes or shadcn themes ??

[@Byte_to_Billions]

Thanks you degea

[@pogboii]

How would i do this without using typescript?

[@akash-kumar737]

I think Mantine UI 7.0 is better alternative. Would like you to review it if possible.

[@aurelianspodarec2629]

its not xd

[@eindbaas]

I always like to just install everything by not specifying a component when using the shadcn add command.

[@GurpreetSingh-ps6kl]

funniest youtuber ever lol

[@marwantarek6391]

What is the name of the theme please , i tried nightowl but the colors here are lighter

[@michaelvillanueva6664]

Hey Ed! Not related to the video but I’m really interested in getting your react course. Is it still up to date? Thanks!

[@denvernaicker8250]

I found this a bit difficult to follow a long, the code snippets for className I manually typed out because I couldn't find the navbar styling, I feel I had to pause the video every few seconds just to write out what you were doing, but it felt exhausting and incoherent as to what I am doing

[@Rafa-nc4ru]

Cool! You have created another bare simple page that says nothing about more sophisticated cases where I have found shadcn to be inconvenient.

[@developedbyed]

Just edit the actual UI component, how would it be inconvenient?

[@abdu1wahid105]

Sometimes a little CSS is all thats required... that's whats so good about utility classes, you decide to use them on a per case basis. 👌Fomo-ing into the latest UI won't instantly catapult learner coders into seasoned Software engineers.

[@talleyrand9530]

What a chad!

[@pranaavshinde9731]

its not working from my project

[@nickveldkamp5396]

Why Next.JS over Nuxt.JS?

[@mario_luis_dev]

bc NoNuxt November is approaching…

[@healdesk5649]

cant install it on nextjs (JS project) :/

[@_shienister_]

Hey Ed can you do sencha Extjs?

[@davidgibradze9692]

Your theme name?

[@vohoanghaduong6639]

please. Why my visual studio code when writing classname dont show the list existing like you. Teach me please

[@jayanspaliwal5907]

I love your videos. I would also love to buy your courses but in my country's currency, they're too expensive. 😥

[@kkkotiqqq]

Dont buy his courses, this is a crap

[@MohammadSadiqu]

nice one

[@ValorHeart]

Where do i get desktop background like yours?

[@Quabbe2]

Internet has some wallpapers

[@AlexisSilva-e2q]

I love u!

[@KayCherk]

Looks like hell to me, and why there’s so many bots in this video?

[@thomasfuchsberger3912]

I use ant.design for my UI‘s

[@KISSUKUU]

Yeah it's good But PrimeReact is better than that. I recently switched to PrimeReact after I found that.

[@ruggeddog3103]

Next UI

[@siddharthsaurav3657]

Why they not provide warning, info variant of buttons by default

[@filipkovac767]

funny thing is: stating you use Next.js 13 has no correlation whether you use app or pages router.

[@developedbyed]

Did you see the app folder there? That means it’s app router

[@MitsubishiHondaAcord]

we upgraded bbbbbbttch

[@quoclam7140]

Can you make a video with Shadcn without typescript and next?

[@febribayunurcahyo9308]

At this stage webdev is witchcraftery

[@ThatRandomDude914]

…/Learning/woooo 😂

[@MohammadSadiqu]

csd

[@geelemo]

No pagination

[@nivethan_me]

its been a month buddy & you're outdated😂 now do the same with next14 for us!

[@wildanm2]

shadcn is extremelly lagging

[@codenerd7823]

@developedbyed Trust me Dev ED was the better name in my opinion

[@MohammadSadiqu]

type your message

[@MohammadSadiqu]

sadiqu hasan 123

[@MohammadSadiqu]

This is awesome

[@RupaDevi-j1k]

Hey how can build array Tags Ui using shadcn

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

This is awesome

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

nice one

[@MohammadSadiqu]

nice one