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

Пікірлер: 114

  • @developedbyed
    @developedbyed9 ай бұрын

    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

    @marvinkr

    9 ай бұрын

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

  • @developedbyed

    @developedbyed

    9 ай бұрын

    Yeah both of these!

  • @Zaromir

    @Zaromir

    9 ай бұрын

    my body is so ready

  • @zdmgy3778

    @zdmgy3778

    9 ай бұрын

    I need a specific time.😀

  • @trburaktr16

    @trburaktr16

    8 ай бұрын

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

  • @randerins
    @randerins9 ай бұрын

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

  • @sjonny-depp

    @sjonny-depp

    7 ай бұрын

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

  • @fbenfrank

    @fbenfrank

    2 ай бұрын

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

  • @padione3540
    @padione35409 ай бұрын

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

  • @csy897
    @csy8976 ай бұрын

    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.

  • @thedude6810
    @thedude68108 ай бұрын

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

  • @ahofi
    @ahofiАй бұрын

    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. :)

  • @danielparagas576
    @danielparagas5768 ай бұрын

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

  • @ebubekiryazgan
    @ebubekiryazgan9 ай бұрын

    Yessss here is the video I wanted

  • @MChiemelie
    @MChiemelie9 ай бұрын

    This is a really great man!

  • @aymaneamen5854
    @aymaneamen58543 ай бұрын

    looks awesome, I will give it a shot !

  • @naveenalla3000
    @naveenalla30009 ай бұрын

    Wonderful definitely I should make use of it

  • @cristiancirje
    @cristiancirje8 ай бұрын

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

  • @niteshbabu5731
    @niteshbabu57319 ай бұрын

    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

  • @Beast80K
    @Beast80K8 ай бұрын

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

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @youtubevanched7665
    @youtubevanched76659 ай бұрын

    Which VSCode theme you are using ?

  • @michaelvillanueva6664
    @michaelvillanueva66649 ай бұрын

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

  • @xhurish
    @xhurish8 ай бұрын

    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

  • @moerv673
    @moerv6738 ай бұрын

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

  • @booom5572

    @booom5572

    5 ай бұрын

    Bump! What theme is this!

  • @anonymoussloth6687
    @anonymoussloth66879 ай бұрын

    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

    @Houseofstartup

    9 ай бұрын

    Same question

  • @kiranojha8811

    @kiranojha8811

    8 ай бұрын

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

  • @Siddu7987
    @Siddu79877 ай бұрын

    which one to use Radix Themes or shadcn themes ??

  • @gwemula
    @gwemula8 ай бұрын

    00:25 | Your face scared me a little 🤣

  • @stanislavvranic1745
    @stanislavvranic17457 ай бұрын

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

  • @eindbaas
    @eindbaas9 ай бұрын

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

  • @user-hd3lx8qc7s
    @user-hd3lx8qc7s5 ай бұрын

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

  • @marwantarek6391
    @marwantarek63918 ай бұрын

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

  • @_shienister_
    @_shienister_9 ай бұрын

    Hey Ed can you do sencha Extjs?

  • @kurifurikurifuri
    @kurifurikurifuri3 ай бұрын

    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.

  • @siddharthsaurav3657
    @siddharthsaurav36579 ай бұрын

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

  • @aarondiaz2506
    @aarondiaz25069 ай бұрын

    yep it is 😊

  • @flnnx
    @flnnx4 ай бұрын

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

  • @maherylala2153
    @maherylala21539 ай бұрын

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

  • @user-kr2uu8kg2r
    @user-kr2uu8kg2r9 ай бұрын

    I love u!

  • @mahadsaleem9317
    @mahadsaleem931720 күн бұрын

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

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @FzsHotDogInDonut
    @FzsHotDogInDonut9 ай бұрын

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

  • @anonymoussloth6687

    @anonymoussloth6687

    9 ай бұрын

    Same question

  • @talleyrand9530
    @talleyrand95307 ай бұрын

    What a chad!

  • @user-zn4ix8rx9f
    @user-zn4ix8rx9fАй бұрын

    Hey how can build array Tags Ui using shadcn

  • @GurpreetSingh-ps6kl
    @GurpreetSingh-ps6kl9 ай бұрын

    funniest youtuber ever lol

  • @pogboii
    @pogboii3 ай бұрын

    How would i do this without using typescript?

  • @akash-kumar737
    @akash-kumar7379 ай бұрын

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

  • @aurelianspodarec2629

    @aurelianspodarec2629

    8 ай бұрын

    its not xd

  • @ValorHeart
    @ValorHeart9 ай бұрын

    Where do i get desktop background like yours?

  • @Quabbe2

    @Quabbe2

    9 ай бұрын

    Internet has some wallpapers

  • @denvernaicker8250
    @denvernaicker82507 ай бұрын

    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

  • @jayanspaliwal5907
    @jayanspaliwal59079 ай бұрын

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

  • @kkkotiqqq

    @kkkotiqqq

    3 ай бұрын

    Dont buy his courses, this is a crap

  • @funfacts9668
    @funfacts96689 ай бұрын

    Sir please make a complete course on GSAP with Three JS

  • @btssugahit4663

    @btssugahit4663

    9 ай бұрын

    Seriously threejs is giving me headaches and heart attacks

  • @imsofckinenergized

    @imsofckinenergized

    5 ай бұрын

    ​@@btssugahit4663😂 Yeah Same here

  • @healdesk5649
    @healdesk56498 ай бұрын

    cant install it on nextjs (JS project) :/

  • @Rafa-nc4ru
    @Rafa-nc4ru9 ай бұрын

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

  • @developedbyed

    @developedbyed

    9 ай бұрын

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

  • @abdu1wahid105

    @abdu1wahid105

    8 ай бұрын

    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.

  • @pranaavshinde9731
    @pranaavshinde97318 ай бұрын

    its not working from my project

  • @nickveldkamp5396
    @nickveldkamp53969 ай бұрын

    Why Next.JS over Nuxt.JS?

  • @mario_luis_dev

    @mario_luis_dev

    8 ай бұрын

    bc NoNuxt November is approaching…

  • @ruggeddog3103
    @ruggeddog31035 ай бұрын

    Next UI

  • @geelemo
    @geelemo7 ай бұрын

    No pagination

  • @thomasfuchsberger3912
    @thomasfuchsberger39125 ай бұрын

    I use ant.design for my UI‘s

  • @imsofckinenergized

    @imsofckinenergized

    5 ай бұрын

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

  • @quoclam7140
    @quoclam71408 ай бұрын

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

  • @KayCherk
    @KayCherk8 ай бұрын

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

  • @MitsubishiHondaAcord
    @MitsubishiHondaAcord7 ай бұрын

    we upgraded bbbbbbttch

  • @santoshkumarmarar7048
    @santoshkumarmarar70487 ай бұрын

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

  • @filipkovac767
    @filipkovac7679 ай бұрын

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

  • @developedbyed

    @developedbyed

    9 ай бұрын

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

  • @ThatRandomDude914
    @ThatRandomDude9142 ай бұрын

    …/Learning/woooo 😂

  • @febribayunurcahyo9308
    @febribayunurcahyo93088 ай бұрын

    At this stage webdev is witchcraftery

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    csd

  • @nivethan_me
    @nivethan_me7 ай бұрын

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

  • @wildanm2
    @wildanm26 ай бұрын

    shadcn is extremelly lagging

  • @vohoanghaduong6639
    @vohoanghaduong66392 ай бұрын

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

  • @codenerd7823
    @codenerd78238 ай бұрын

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

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    type your message

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    sadiqu hasan 123

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @user-zn4ix8rx9f
    @user-zn4ix8rx9fАй бұрын

    Hey how can build array Tags Ui using shadcn

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    This is awesome

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

  • @MohammadSadiqu
    @MohammadSadiqu8 ай бұрын

    nice one

Келесі