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

Подписаться 940 тыс.

Просмотров 137 тыс.

50% 1

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

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@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 11 месяцев назад

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

@csy897 9 месяцев назад

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.

@padione3540 Год назад

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

@maherylala2153 Год назад

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

@moerv673 11 месяцев назад

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

@booom5572 8 месяцев назад

Bump! What theme is this!

@danielparagas576 11 месяцев назад

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

@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

@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

@ajndlajjnl4175 20 дней назад

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!

@MChiemelie Год назад

This is a really great man!

@aymaneamen5854 6 месяцев назад

looks awesome, I will give it a shot !

@cristiancirje 11 месяцев назад

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

@z1982_ 2 месяца назад

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

@АлександрМерный-м1ч 8 месяцев назад

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

@santoshkumarmarar7048 10 месяцев назад

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

@RupaDevi-j1k 4 месяца назад

Hey how can build array Tags Ui using shadcn

@stanislavvranic1745 10 месяцев назад

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

@xhurish 11 месяцев назад

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

@siddharthsaurav3657 Год назад

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

@ebubekiryazgan Год назад

Yessss here is the video I wanted

@eindbaas Год назад

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

@mahadsaleem9317 3 месяца назад

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

@pogboii 6 месяцев назад

How would i do this without using typescript?

@marwantarek6391 Год назад

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

@akash-kumar737 Год назад

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

@aurelianspodarec2629 11 месяцев назад

its not xd

@funfacts9668 Год назад

Sir please make a complete course on GSAP with Three JS

@btssugahit4663 Год назад

Seriously threejs is giving me headaches and heart attacks

@imsofckinenergized 8 месяцев назад

@@btssugahit4663😂 Yeah Same here

@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 11 месяцев назад

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

@davidgibradze9692 Месяц назад

Your theme name?

@nickveldkamp5396 Год назад

Why Next.JS over Nuxt.JS?

@mario_luis_dev Год назад

bc NoNuxt November is approaching…

@MohammadSadiqu Год назад

This is awesome

@pranaavshinde9731 11 месяцев назад

its not working from my project

@ValorHeart Год назад

Where do i get desktop background like yours?

@Quabbe2 Год назад

Internet has some wallpapers

@aarondiaz2506 Год назад

yep it is 😊

@flnnx 8 месяцев назад

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

@talleyrand9530 11 месяцев назад

What a chad!

@MohammadSadiqu Год назад

nice one

@MitsubishiHondaAcord 11 месяцев назад

we upgraded bbbbbbttch

@ThatRandomDude914 5 месяцев назад

…/Learning/woooo 😂

@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

@quoclam7140 Год назад

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

@febribayunurcahyo9308 11 месяцев назад

At this stage webdev is witchcraftery

@nivethan_me 10 месяцев назад

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

@geelemo 10 месяцев назад

No pagination

@wildanm2 9 месяцев назад

shadcn is extremelly lagging

@MohammadSadiqu Год назад

type your message

@randerins Год назад

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

@sjonny-depp 10 месяцев назад

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

@fbenfrank 5 месяцев назад

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

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

nice one

@youtubevanched7665 Год назад

Which VSCode theme you are using ?

@Beast80K Год назад

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

@thedude6810 11 месяцев назад

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

@GurpreetSingh-ps6kl Год назад

funniest youtuber ever lol

@MohammadSadiqu Год назад

This is awesome

@RupaDevi-j1k 4 месяца назад

Hey how can build array Tags Ui using shadcn

@FzsHotDogInDonut Год назад

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

@anonymoussloth6687 Год назад

Same question

@ruggeddog3103 8 месяцев назад

Next UI

@Siddu7987 10 месяцев назад

which one to use Radix Themes or shadcn themes ??

@kurifurikurifuri 7 месяцев назад

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.

@KayCherk Год назад

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

@gwemula 11 месяцев назад

00:25 | Your face scared me a little 🤣

@healdesk5649 Год назад

cant install it on nextjs (JS project) :/

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

This is awesome

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

nice one

@MohammadSadiqu Год назад

csd

@_shienister_ Год назад

Hey Ed can you do sencha Extjs?

@AlexisSilva-e2q Год назад

I love u!

@naveenalla3000 Год назад

Wonderful definitely I should make use of it

@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.