KZhead
Ғылым және технология

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

developedbyed
2023 ж. 24 Қыр.
120 288 Рет қаралды
Жүктеу

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

Пікірлер

  • 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 ✨✨

    @developedbyed@developedbyed8 ай бұрын

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

      @marvinkr@marvinkr8 ай бұрын

    • Yeah both of these!

      @developedbyed@developedbyed7 ай бұрын

    • my body is so ready

      @Zaromir@Zaromir7 ай бұрын

    • I need a specific time.😀

      @zdmgy3778@zdmgy37787 ай бұрын

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

      @trburaktr16@trburaktr167 ай бұрын

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

    @padione3540@padione35408 ай бұрын

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

    @randerins@randerins8 ай бұрын

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

      @tajko@tajko6 ай бұрын

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

      @fbenfrank@fbenfrankАй бұрын

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

    @csy897@csy8974 ай бұрын

  • Hey! Thanks for sharing. At work we chose Preline UI and I tried it for one of my personal projects. But for the next one, I wanted to try shadcn ui. Your video helped me to make the decision. :)

    @ahofi@ahofi10 күн бұрын

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

    @thedude6810@thedude68107 ай бұрын

  • This is a really great man!

    @MChiemelie@MChiemelie8 ай бұрын

  • looks awesome, I will give it a shot !

    @aymaneamen5854@aymaneamen5854Ай бұрын

  • Wonderful definitely I should make use of it

    @naveenalla3000@naveenalla30008 ай бұрын

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

    @danielparagas576@danielparagas5767 ай бұрын

  • 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

    @niteshbabu5731@niteshbabu57317 ай бұрын

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

    @Beast80K@Beast80K7 ай бұрын

  • Which VSCode theme you are using ?

    @youtubevanched7665@youtubevanched76657 ай бұрын

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

    @michaelvillanueva6664@michaelvillanueva66648 ай бұрын

  • Yessss here is the video I wanted

    @ebubekiryazgan@ebubekiryazgan8 ай бұрын

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

    @cristiancirje@cristiancirje7 ай бұрын

  • 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

    @xhurish@xhurish7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

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

    @moerv673@moerv6737 ай бұрын

    • Bump! What theme is this!

      @booom5572@booom55723 ай бұрын

  • 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

    @anonymoussloth6687@anonymoussloth66878 ай бұрын

    • Same question

      @Houseofstartup@Houseofstartup7 ай бұрын

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

      @kiranojha8811@kiranojha88117 ай бұрын

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

    @eindbaas@eindbaas7 ай бұрын

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

    @marwantarek6391@marwantarek63917 ай бұрын

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

    @nazarknyazev6442@nazarknyazev64422 ай бұрын

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

    @maherylala2153@maherylala21538 ай бұрын

  • which one to use Radix Themes or shadcn themes ??

    @Siddu7987@Siddu79876 ай бұрын

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

    @siddharthsaurav3657@siddharthsaurav36577 ай бұрын

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

    @stanislavvranic1745@stanislavvranic17456 ай бұрын

  • yep it is 😊

    @aarondiaz2506@aarondiaz25067 ай бұрын

  • 00:25 | Your face scared me a little 🤣

    @gwemula@gwemula7 ай бұрын

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

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

  • Hey Ed can you do sencha Extjs?

    @_shienister_@_shienister_8 ай бұрын

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

    @FzsHotDogInDonut@FzsHotDogInDonut8 ай бұрын

    • Same question

      @anonymoussloth6687@anonymoussloth66878 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • Hey how can build array Tags Ui using shadcn

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

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

    @flnnx@flnnx3 ай бұрын

  • How would i do this without using typescript?

    @HAD3Sofficial@HAD3Sofficial2 ай бұрын

  • Where do i get desktop background like yours?

    @ValorHeart@ValorHeart7 ай бұрын

    • Internet has some wallpapers

      @Quabbe2@Quabbe27 ай бұрын

  • 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

    @denvernaicker8250@denvernaicker82506 ай бұрын

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

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

    • its not xd

      @aurelianspodarec2629@aurelianspodarec26297 ай бұрын

  • cant install it on nextjs (JS project) :/

    @healdesk5649@healdesk56497 ай бұрын

  • Sir please make a complete course on GSAP with Three JS

    @funfacts9668@funfacts96687 ай бұрын

    • Seriously threejs is giving me headaches and heart attacks

      @btssugahit4663@btssugahit46637 ай бұрын

    • ​@@btssugahit4663😂 Yeah Same here

      @imsofckinenergized@imsofckinenergized4 ай бұрын

  • I love u!

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

  • funniest youtuber ever lol

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

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

    @jayanspaliwal5907@jayanspaliwal59077 ай бұрын

    • Dont buy his courses, this is a crap

      @kkkotiqqq@kkkotiqqq2 ай бұрын

  • What a chad!

    @talleyrand9530@talleyrand95306 ай бұрын

  • its not working from my project

    @pranaavshinde9731@pranaavshinde97317 ай бұрын

  • Why Next.JS over Nuxt.JS?

    @nickveldkamp5396@nickveldkamp53967 ай бұрын

    • bc NoNuxt November is approaching…

      @mario_luis_dev@mario_luis_dev7 ай бұрын

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

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

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

      @developedbyed@developedbyed7 ай бұрын

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

      @abdu1wahid105@abdu1wahid1057 ай бұрын

  • Next UI

    @ruggeddog3103@ruggeddog31033 ай бұрын

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

    @quoclam7140@quoclam71407 ай бұрын

  • we upgraded bbbbbbttch

    @MitsubishiHondaAcord@MitsubishiHondaAcord6 ай бұрын

  • I use ant.design for my UI‘s

    @thomasfuchsberger3912@thomasfuchsberger39124 ай бұрын

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

      @imsofckinenergized@imsofckinenergized4 ай бұрын

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

    @KayCherk@KayCherk7 ай бұрын

  • No pagination

    @geelemo@geelemo6 ай бұрын

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

    @filipkovac767@filipkovac7677 ай бұрын

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

      @developedbyed@developedbyed7 ай бұрын

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

    @santoshkumarmarar7048@santoshkumarmarar70486 ай бұрын

  • …/Learning/woooo 😂

    @ThatRandomDude914@ThatRandomDude914Ай бұрын

  • At this stage webdev is witchcraftery

    @febribayunurcahyo9308@febribayunurcahyo93087 ай бұрын

  • csd

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

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

    @nivethan_me@nivethan_me6 ай бұрын

  • shadcn is extremelly lagging

    @wildanm2@wildanm25 ай бұрын

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

    @vohoanghaduong6639@vohoanghaduong6639Ай бұрын

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

    @codenerd7823@codenerd78237 ай бұрын

  • type your message

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • sadiqu hasan 123

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • Hey how can build array Tags Ui using shadcn

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

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • This is awesome

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын

  • nice one

    @MohammadSadiqu@MohammadSadiqu7 ай бұрын
KZhead