Build Your UI Component Library in React & Next.js | ShadCN UI for Beginners

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии • 57

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  7 месяцев назад +39

    *NOTE:* Next.js just introduced version 14.2 overnight and it is broken. Instead of installing "latest", for now, I recommend version 14.1.4. Modify the install line you see in the tutorial by replacing "latest" with 14.1.4: npx create-next-app@14.1.4 my-app --typescript --tailwind --eslint

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

      Thankyou

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

      Thanks

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

      Thanks! I was stuck since this morning with a build error in the new version.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  7 месяцев назад +4

      @@AyushmaansinghxX Yes I wasted some time on it myself.

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

      I was stucked i was trying to reinstall many time

  • @MouseCodes
    @MouseCodes 7 месяцев назад +12

    Can we get an advanced guide on design systems and component libraries where you address topics like testing, storybook and playwright?

  • @FalioV
    @FalioV 7 месяцев назад +4

    For the past year for me became like a ritual to watch you early in the weekends (since I have no time trough out of the week :D). And you always give me something new to look at or another point of view that is priceless. Thank you for your work and keep it up ! :)

  • @togya4
    @togya4 7 месяцев назад +1

    Combining shadcn ui & daysi ui is just 🔥🔥👌🏿

  • @AndreaBarghigiani
    @AndreaBarghigiani 7 месяцев назад +4

    Hi Dave, great video as usual and thank you for publishing so much quality content.
    You know what could be a great idea for the next video? A course where you teach us how to leverage the ShadCN UI library by building our own library. I've been wrapping my head around the replication of the amazing CLI that this library provide us. It could be great to have the ability to install our own components with our own CLI tool 😅

  • @shodwana
    @shodwana Месяц назад

    Thank you Dave, I normally depend on AI when coding but your video taught me a lot today. I am one of your subies, definitely need more of your content perhaps even enrolling toy our courses😍

  • @kumargupta7149
    @kumargupta7149 7 месяцев назад +2

    Thanks for it! Dave. More on other library as well

  • @chouaibdjerdi9092
    @chouaibdjerdi9092 7 месяцев назад +3

    Loved the video I think we need to see more videos about ShadcnUI on RUclips

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  7 месяцев назад +3

      There are so many good components here. I can do more in the future too 🚀

  • @FaselGodbcho-e7w
    @FaselGodbcho-e7w Месяц назад

    Thanks for another clear & concise tutorial.

  • @bnssoftware3292
    @bnssoftware3292 7 месяцев назад +2

    Love your style. Subscribed.

  • @piotrszymanski8325
    @piotrszymanski8325 7 месяцев назад +1

    Great vid, but i think that everybody who is looking for this type of content, already knows how to create a component made from others component and use it as a whole and it would be nice to show how to handle passing all the props like onChange, value etc... to that custom component which will be forwarded to initial text input - this is more usefull i think.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  7 месяцев назад +3

      That could make a good follow up. I have discovered as a teacher, I cannot assume everyone already knows how to do anything though.

  • @Pareshbpatel
    @Pareshbpatel Месяц назад

    An excellent introduction to ShadCN UI. Thanks, Dave.
    {2024-10-25}

  • @TravinskiyVladislav
    @TravinskiyVladislav 7 месяцев назад +1

    ❤ thank you Dave, again. Like always

  • @samadams4751
    @samadams4751 7 месяцев назад +1

    Thank you very much Coach Dave, Shadcn Amazing anther great tutorial. Big hugs coach, love it🙏

  • @johannes.evol.
    @johannes.evol. 5 месяцев назад +1

    Hey thanks for the intro! Would’ve loved if you stayed on dark mode haha, my eyes hurt from all the white 😂 greetings from Portugal

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

    parkui bettre and more cohesive and cross framework , try showing sonner toast nside a dialog in shadcn

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

    thanks a lot dave

  • @nasarullahkhan3379
    @nasarullahkhan3379 7 месяцев назад +1

    In react 19 forwardRef will not work. But Shadcn used forwardRef about in all components.

    • @dreamecho100
      @dreamecho100 7 месяцев назад +1

      Wait, I thought it will be *not needed*, not it will be removed completely, at least for now

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

    Sure, u right, but making components in react seems like obvious. The follow up would be highly appreciated. :)

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

    Please explain shadcn datatable with search ,filter with drizzle or prima or api data

  • @BrajagopalMukherjee
    @BrajagopalMukherjee 7 месяцев назад +1

    Hi Dave ,started with Shadcn ui ,Can we expect Reactjs revised tutotial ?any full stack project as u have covered Backend also (me also from your help)?

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

    It essentially IS a component library with extra steps... meaning that if there's a new version that introduces important features or improvements, good luck upgrading. Seems like a weird hype to me.

  • @mahfoudh_arous
    @mahfoudh_arous Месяц назад

    is there a reason for choosing npm every time instead of using pnpm, yarn, or any another package manager?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Месяц назад +1

      No, they all work. npm has more familiarity so I usually stick with it for tutorials.

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

    Hi @DaveGrayTeachesCode, super interesting content! I have a question: If you just need to give styling to the components, would you keep this approach of creating a new component which uses the shad component inside? Or would you override the shad component with new variants? (or edit current variants?)

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

      If you only needed a button, you would just override anything you wanted to change about the button. If you want to add additional features, then you would create your own component.

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 7 месяцев назад

    THank you

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

    I just completed django so can you please make a project with django and react

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

    Sir , why haven't you added angular tutorial?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  7 месяцев назад +1

      There is only so much time in a given day or week. I create free content for RUclips but I also have a full-time job and other obligations.

  • @kamaliddinsattorov7493
    @kamaliddinsattorov7493 4 месяца назад

    Yo Dave, you could have waited another year or so to upload this video. I mean, are you racing with that sloth in Zootopia? If so, you are losing race)

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

    👍🏻

  • @Joseph-Codes
    @Joseph-Codes 7 месяцев назад

    The video title is clickbait what the title says and what he did doesn't align

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

      Disagree. I highlighted the fact that the shadcn docs say it is to be used as a reference to build your own component library. The title also says ShadCN UI for Beginners and I cover how to get started well. I also show how to build a custom component using a ShadCN component. You need to build your own component library from there.

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

      @@DaveGrayTeachesCode I wouldn't go as far as calling this video clickbait, and you do explain how to build a custom component using ShadCN really well. However, I also thought your video didn't live up to it's title. When I think of building a component library with ShadCN, I think of building a library of components in a separate package, that I can use in more than one application, rather than a collection of components sitting in a single NextJS application . It would be great if you could expand on this video and put those components in a library.

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

      @@brendazysman3814 well said. My idea was show everyone how ShadCN/ui works so everyone can build their own custom component libraries with it.

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

    Shadcn.... Yeah, I'm never using it.

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

      Any particular reason why?