Shadcn + Next.js 13 is HEAVEN

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

Рет қаралды 117,994

Күн бұрын

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/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 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

Пікірлер: 112

@developedbyed 7 ай бұрын

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 7 ай бұрын

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

@developedbyed 7 ай бұрын

Yeah both of these!

@Zaromir 7 ай бұрын

my body is so ready

@zdmgy3778 7 ай бұрын

I need a specific time.😀

@trburaktr16 7 ай бұрын

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

@padione3540 7 ай бұрын

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

@randerins 7 ай бұрын

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

@tajko 5 ай бұрын

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

@fbenfrank 27 күн бұрын

@@tajkoyou always have the option to code it yourself.

@csy897 4 ай бұрын

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.

@MChiemelie 7 ай бұрын

This is a really great man!

@thedude6810 7 ай бұрын

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

@naveenalla3000 7 ай бұрын

Wonderful definitely I should make use of it

@ebubekiryazgan 7 ай бұрын

Yessss here is the video I wanted

@cristiancirje 7 ай бұрын

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

@danielparagas576 6 ай бұрын

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

@MohammadSadiqu 7 ай бұрын

This is awesome

@niteshbabu5731 7 ай бұрын

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

@aymaneamen5854 Ай бұрын

looks awesome, I will give it a shot !

@michaelvillanueva6664 7 ай бұрын

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

@Beast80K 7 ай бұрын

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

@youtubevanched7665 7 ай бұрын

Which VSCode theme you are using ?

@eindbaas 7 ай бұрын

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

@aarondiaz2506 7 ай бұрын

yep it is 😊

@moerv673 7 ай бұрын

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

@booom5572 3 ай бұрын

Bump! What theme is this!

@anonymoussloth6687 7 ай бұрын

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 7 ай бұрын

Same question

@kiranojha8811 7 ай бұрын

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

@maherylala2153 7 ай бұрын

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

@marwantarek6391 7 ай бұрын

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

@gwemula 7 ай бұрын

00:25 | Your face scared me a little 🤣

@MohammadSadiqu 7 ай бұрын

nice one

@_shienister_ 7 ай бұрын

Hey Ed can you do sencha Extjs?

@siddharthsaurav3657 7 ай бұрын

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

@nazarknyazev6442 2 ай бұрын

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.

@flnnx 3 ай бұрын

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

@xhurish 7 ай бұрын

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

@stanislavvranic1745 6 ай бұрын

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

@FzsHotDogInDonut 7 ай бұрын

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

@anonymoussloth6687 7 ай бұрын

Same question

@akash-kumar737 7 ай бұрын

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

@aurelianspodarec2629 7 ай бұрын

its not xd

@funfacts9668 7 ай бұрын

Sir please make a complete course on GSAP with Three JS

@btssugahit4663 7 ай бұрын

Seriously threejs is giving me headaches and heart attacks

@imsofckinenergized 4 ай бұрын

@@btssugahit4663😂 Yeah Same here

@jayanspaliwal5907 7 ай бұрын

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

@kkkotiqqq 2 ай бұрын

Dont buy his courses, this is a crap

@ValorHeart 7 ай бұрын

Where do i get desktop background like yours?

@Quabbe2 7 ай бұрын

Internet has some wallpapers

@GurpreetSingh-ps6kl 7 ай бұрын

funniest youtuber ever lol

@user-hd3lx8qc7s 3 ай бұрын

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

@user-kr2uu8kg2r 7 ай бұрын

I love u!

@Siddu7987 6 ай бұрын

which one to use Radix Themes or shadcn themes ??

@user-zn4ix8rx9f 6 күн бұрын

Hey how can build array Tags Ui using shadcn

@Rafa-nc4ru 7 ай бұрын

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

@developedbyed 7 ай бұрын

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

@abdu1wahid105 7 ай бұрын

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 6 ай бұрын

What a chad!

@quoclam7140 7 ай бұрын

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

@healdesk5649 7 ай бұрын

cant install it on nextjs (JS project) :/

@HAD3Sofficial 2 ай бұрын

How would i do this without using typescript?

@denvernaicker8250 6 ай бұрын

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

@nickveldkamp5396 7 ай бұрын

Why Next.JS over Nuxt.JS?

@mario_luis_dev 7 ай бұрын

bc NoNuxt November is approaching…

@pranaavshinde9731 6 ай бұрын

its not working from my project

@filipkovac767 7 ай бұрын

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

@developedbyed 7 ай бұрын

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

@thomasfuchsberger3912 4 ай бұрын

I use ant.design for my UI‘s

@imsofckinenergized 4 ай бұрын

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

@febribayunurcahyo9308 7 ай бұрын

At this stage webdev is witchcraftery

@ruggeddog3103 3 ай бұрын

Next UI

@KayCherk 7 ай бұрын

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

@geelemo 6 ай бұрын

No pagination

@ThatRandomDude914 19 күн бұрын

…/Learning/woooo 😂

@MitsubishiHondaAcord 6 ай бұрын

we upgraded bbbbbbttch

@MohammadSadiqu 7 ай бұрын

csd

@nivethan_me 5 ай бұрын

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

@wildanm2 4 ай бұрын

shadcn is extremelly lagging

@santoshkumarmarar7048 6 ай бұрын

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

@vohoanghaduong6639 Ай бұрын

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

@codenerd7823 6 ай бұрын

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

@MohammadSadiqu 7 ай бұрын

type your message

@MohammadSadiqu 7 ай бұрын

sadiqu hasan 123

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

nice one

@user-zn4ix8rx9f 6 күн бұрын

Hey how can build array Tags Ui using shadcn

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

This is awesome

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one

@MohammadSadiqu 7 ай бұрын

nice one