The GOAT of React UI Libraries

Sdílet
Vložit
  • čas přidán 11. 07. 2024
  • If you are struggling to choose the right UI library for your next project or startup application, don't worry! It's not only you. As Web Developers we always have these hard decisions when it comes to choosing the right UI library, but, in this video, we'll discover a new awesome library that made a huge deal on Twitter lately.
    🎉Our Newsletter is live! Join thousands of other developers
    islemmaboud.com/join-newsletter
    ⭐ Timestamps ⭐
    00:00 Intro
    00:31 The UI Libraries Debate
    01:30 Radix UI
    06:06 shadcn/ui
    08:19 Configuring shadcn/ui
    14:13 Building a Dashboard using shadcn/ui
    -- Special Links
    ✨ Join Figma for Free and start designing now!
    psxid.figma.com/69wr7zzb1mxm
    👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
    psxid.figma.com/ucwkx28d18fo-...
    🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
    • Build Login/Register A...
    🧭 Turn Design into React Code | From prototype to Full website in no time
    • Turn Design into React...
    🧭 Watch Tutorial on Designing the website on Figma
    • I Design a onecolor We...
    🧭 Watch Create a Modern React Login/Register Form with smooth Animations
    • Create a Modern React ...
    🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
    • Debug React Apps Like ...
    🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
    • Master React Like Pro ...
    🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
    • Debug React Apps Like ...
    🧭 Introduction to GraphQL with Apollo and React
    • Introduction to GraphQ...
    👉 Personal Links:
    ✨ My Portfolio islemmaboud.com
    🐦 Follow me on Twitter: / ipenywis
    💻 GitHub Profile github.com/ipenywis
    Made with ❤️ by Coderone

Komentáře • 49

  • @anthonyowolabi1890
    @anthonyowolabi1890 Před 6 měsíci +3

    Worked with this library for a project, one of ky best experiences with a ui library fast and efficient

  • @aminedaimallah310
    @aminedaimallah310 Před 10 měsíci +7

    there is also elastic ui, baseweb from uber, carbon from IBM, mantine, primereact and more....

  • @naylord5
    @naylord5 Před 10 měsíci +12

    Shadcn for the win!

  • @mariolim96
    @mariolim96 Před 10 měsíci

    There is so much difference between daisyui and shadcn?

  • @MaxProgramming
    @MaxProgramming Před 10 měsíci +14

    Shadcn ui is truly the goat. Chakra was my favourite after I used Tailwind because it gave me that control over the components but Shadcn ui is simply overpowered 💯

    • @benotisanchez5583
      @benotisanchez5583 Před 10 měsíci +4

      Lol. I've used shadcn, radix, and mui. I've also tried out chakra and ant, but not in-depth. I quickly abandoned radix and shadcn because they just weren't full-featured enough, after using them I regretted leaving the true GOAT, which is mantine. Mantine is so far above these UI libraries is actually funny. I'm now back with mantine and the difference is night and day.

    • @MaxProgramming
      @MaxProgramming Před 10 měsíci +1

      @@benotisanchez5583 Yeah you're right in your place. I totally forgot about Mantine lol. Even I rejected TW and Radix in the first place because Chakra and Mantine literally gave everything.
      Mantine is really good I agree and I'll blindly use it anytime. Shadcn ui gives kind of vercel vibes and the way it blends with tailwind makes me love it even more.
      So yeah if I had to pick any 2 frameworks that'd be Mantine or Shadcn ui. Thanks for reminding me about Mantine

    • @Omar_Al_Seddik
      @Omar_Al_Seddik Před 4 měsíci

      @@benotisanchez5583 Comparing shadcn to Mantine is like comparing apples to oranges. One is a tailwind-based component collection with minimal abstraction, while the latter is a complete component framework that does everything with maximum abstraction and a design system of its own.
      There's no superior approach. Only preferences.

  • @Euquila
    @Euquila Před 5 měsíci

    One thing I don't get is why we have to "choose" between tailwind and -- say -- CSS modules. Isn't it simply a 1-to-1 relationship between them? I'd imagine there's some tool that could re-write your project code to take all the tailwind and put it in a module (and vice-versa)

    • @Warpgatez
      @Warpgatez Před 4 měsíci

      If there’s not, make it yourself. 😂 it’s a good idea and might get used by lots of big companies.

  • @HyperUpscale
    @HyperUpscale Před 6 měsíci +4

    YES I am struggling to choose the right UI library for my next project or startup application.
    Unfortunately this video just made me struggle more.
    Thanks.

    • @CoderOne
      @CoderOne  Před 6 měsíci +2

      Go for shadcn 🫡

    • @Warpgatez
      @Warpgatez Před 4 měsíci

      Shadcnui is fine for most projects. If not refactor with another component library or make your own.

    • @fbenfrank
      @fbenfrank Před 3 měsíci

      Go tailwind UI. Copy and paste.

  • @StefanoV827
    @StefanoV827 Před 10 měsíci +1

    I couldn't find anything about autocomplete for example. I usually use MUI and I have everything I need.

  • @sahrilputra9481
    @sahrilputra9481 Před 6 měsíci +1

    Next ui is the best for me 😂🤣

  • @kudorgyozo
    @kudorgyozo Před 7 měsíci

    at around 5:36: wait isn't there some kind of optimization when u are only using one tiny thing out of a giant library?

  • @cambabyfacecam
    @cambabyfacecam Před 10 měsíci +6

    Cool breakdown, I really like Mantine UI with tailwind, because it has the ready made components and you can kinda bypass designing and still get shit done. Would love to see a video comparing the developer speed of making a full page with Mantine vs Shadcn..

    • @jpjpjpjpjpjpjpjp
      @jpjpjpjpjpjpjpjp Před 10 měsíci +1

      do you style the mantine components with tailwind? i haven’t figured the right way to integrate the two because mantine has its own theming system

    • @ryujinwatatsumi
      @ryujinwatatsumi Před 10 měsíci +2

      I’ve used them both , and trust me shadcn is on another level

    • @ryujinwatatsumi
      @ryujinwatatsumi Před 10 měsíci +1

      ⁠@@jpjpjpjpjpjpjpjpyea they do have there own styling system but u still can override it with tailwind

    • @codewrangler
      @codewrangler Před 10 měsíci

      @@jpjpjpjpjpjpjpjp Interesting! is that even possible??
      i'm curious how you can combine mantine + tailwindcss - This is the first time i've heard of doing this and i'll give this a whirl

    • @Mikkelzu
      @Mikkelzu Před 5 měsíci

      yeah we use mantine at work and i use it for personal projects, hands down my favourite ui to both use and setup, easy mode and especially now with 7.x it's even nicer to just use css modules (or scss) to force my team at work to create re-usable components

  • @dennisk648
    @dennisk648 Před 7 měsíci +2

    Copying and modifying source code for an enterprise project is generally not advisable. This approach effectively permits developers to create their own framework, which may include suboptimal decisions. Developers are paid to achieve business objectives, not to develop a new framework.

  • @kyleshrader9053
    @kyleshrader9053 Před 5 měsíci

    to be fair, making your dashboard was probably pretty easy since it's nearly identical to their example dashboard.

  • @iloveanimals751
    @iloveanimals751 Před 6 měsíci

    tailwind beast

  • @browaruspierogus2182
    @browaruspierogus2182 Před 6 měsíci

    it's all written in typescript? gosh feel for new gen devs... we need native UIs with webassembly access without js monstrous spaghetto

  • @teamarceus7077
    @teamarceus7077 Před 6 měsíci

    MANTINE is brutally under-rated !!!!

  • @kia7422
    @kia7422 Před 6 měsíci

    Mantine is the best one

  • @nanonkay5669
    @nanonkay5669 Před 8 měsíci

    People are seriously sleeping on Mantine

  • @tylim88
    @tylim88 Před 5 měsíci

    mantine is the best

  • @theprimecoder4981
    @theprimecoder4981 Před 10 měsíci

    Chakra is my favorite

  • @voggo
    @voggo Před 5 měsíci +1

    more like chadcn/ui

  • @benotisanchez5583
    @benotisanchez5583 Před 10 měsíci +3

    Ive used shadcn, radix and mui. Ive also tried out ant and chakra. Non of these libraries actually come close to the goat: which is Mantine. Mantine is so much more superior it's hard to even compare the rest.

  • @ba8e
    @ba8e Před 10 měsíci +1

    It's called Svelte 😆

  • @rafikmansour4755
    @rafikmansour4755 Před 4 měsíci

    its not a objective tutorial

  • @lexsemenenko
    @lexsemenenko Před 7 měsíci

    I use Kendo React - I pay for this GOAT. Consider if your app makes money.

  • @steftrando
    @steftrando Před 6 měsíci

    Why the light theme hate? Light theme is objectively superior

  • @EamonnMooney
    @EamonnMooney Před 5 měsíci +11

    I hate tailwind and this project forces you to use it, so it's a no from me.

    • @xyssxy
      @xyssxy Před 5 měsíci +3

      why? twc is awesome

    • @mr.random8447
      @mr.random8447 Před 5 měsíci +4

      Tailwind is goat

    • @Warpgatez
      @Warpgatez Před 4 měsíci +4

      You’d rather spend hours making your own css for every project? Tailwind saves so much time and you can customize it to fit your nuances 😂

    • @ACEmmanuel
      @ACEmmanuel Před 3 měsíci

      Adapt or give up

    • @teegees
      @teegees Před 21 dnem

      Why do you hate TW please elaborate