This React UI Library is GAME CHANGER!

Поделиться
HTML-код
  • Опубликовано: 30 май 2023
  • Check out my courses to become a PRO 🔥
    developedbyed.com
    Check out tailwind and shadcn right here
    ui.shadcn.com/
    tailwindcss.com/
    🛴 Follow me on:
    Twitch: / developedbyed
    Twitter: / developedbyed
    Instagram: / developedbyed
    Github: github.com/developedbyed/
    #react #webdevelopment
  • НаукаНаука

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

  • @ahmed.systems
    @ahmed.systems 11 месяцев назад +156

    I like how at the start I thought shadcn was just a tailwind copy paste library, and now it is one of the most loved UI libraries out there.

  • @haritpatel5001
    @haritpatel5001 11 месяцев назад +124

    I would love more detailed build with this Library. Amazing content.

    • @PrinceDalsaniyaYT
      @PrinceDalsaniyaYT 11 месяцев назад +2

      totally agreed. Would love to see whole website build with this UI library.

    • @jboss1073
      @jboss1073 11 месяцев назад +1

      @@PrinceDalsaniyaYT Whole website? I would love to see a whole GUI Builder built with it. Why do you have such low expectations? Demand more! If it's so awesome, why don't they develop a GUI Builder with it so no one has to write code for it anymore?
      All Good Quality UI Libraries prove themselves by building a GUI Builder that obsoletes its own UI Library - such that no one needs to code it anymore and everyone can drag-and-drop elements on a canvas and configure them through a GUI.
      So where is the awesomeness?

    • @sashnaidu8806
      @sashnaidu8806 11 месяцев назад +1

      Me too. Would love to see more using Shadcn

    • @miad.4976
      @miad.4976 11 месяцев назад

      +1 😊

  • @alexg7282
    @alexg7282 11 месяцев назад +2

    I just discovered Shadcn few weeks ago and now i really enjoy work with this library ! Keep going

  • @diogosoares6546
    @diogosoares6546 10 месяцев назад +65

    Hey bro, I already knew shadcn-ui, I thought it was great, but I wanted to give you a tip, in the image instead of using the Skeleton component, you could use the "placeholder" property of the Image component of NextJS which is also a skeleton but simulates a blur in the image that will be loaded, I find this effect much more interesting in the case of the image specifically speaking.

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

      Yeah placeholder is nice. The only time I wouldn't use it is for logos because it doesn't work with png files but it works great with the standard file types.

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

    Would love to see a full build with Shadcn, I recently wanted that exact thing. Amazing job!

  • @PaulBurke
    @PaulBurke 11 месяцев назад +21

    Was hoping to see more focus on the library but most of the video was about setting up the project to display the single Skeleton component.

  • @svatoplukputerka2405
    @svatoplukputerka2405 11 месяцев назад +9

    That looks awesome! I am gonna try it out on my project

  • @premiare
    @premiare 11 месяцев назад +58

    I've been following this library since shadcn's taxonomy example. They're really doing great stuff, a pillar in the dev community. In Shadcn we trust.

    • @gonzalobruna7154
      @gonzalobruna7154 11 месяцев назад +4

      it's crazy that I watched it grow this quickly. I remember when he asked in twitter, "should I make a components library?" and we all agreed.

  • @stuartdalrymple
    @stuartdalrymple 3 месяца назад

    First time watching your channel; as a beginner I really appreciate you over-explaining / showing all the steps. Kee n to watch your other vids now. Thanks!!

  • @CodeMuscle00
    @CodeMuscle00 11 месяцев назад +2

    You are the reason I've been so fascinated by CSS and JS till date. Another banger. Wanted to learn the skeleton loader for a very logn time! Got to know it in just 8 minutes! Love it 🔥

  • @PatalJunior
    @PatalJunior 11 месяцев назад +54

    A good way to test those loading animations, in the network tab, select a slower connection to artificially throttle connection.
    That and disabling cache usually is easier than doing it in the code.

    • @Asithan476
      @Asithan476 10 месяцев назад +2

      Thanks for this

  • @babatundeadenowo7568
    @babatundeadenowo7568 11 месяцев назад +15

    Hey @developedbyed , I see you struggled a bit with creating boilerplate code for a new react component at 13:05. With the VsCode extension, you can generate different types of react component boilerplates with short-hands like rfce for a react functional component with the export statement at the end.

  • @developedbyed
    @developedbyed  11 месяцев назад +77

    Shout out to shadcn for the amazing work ✨

  • @codewithfriixe
    @codewithfriixe 11 месяцев назад +2

    I would like to see a more detailed build with this Library, Insaneee 🔥

  • @saman6199
    @saman6199 11 месяцев назад +1

    I think everyone would love to see a full project powered by shadcn UI, I personally would really appreciate your effort. ❤

  • @monterourena
    @monterourena 11 месяцев назад +1

    Awesome video! Please keep uploading more content about shadcn!

  • @okrunner
    @okrunner 11 месяцев назад +13

    Thanks very much for your illuminating videos! And yes, please create a video demonstrating the shadcn more in depth to create a somewhat fully functional webapp.

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

      Please don't fall for this guy's scam. Front-end needs no code. Look at development 20 years ago. All UI was dragged and dropped. Stop lying to beginners that UI needs code. UI is a drag and drop job, always has been, and we're currently stuck in a "full stack fad" that is fooling backend developers into having to "code the frontend" which is something that never existed.

  • @madhavdhobale9576
    @madhavdhobale9576 11 месяцев назад +4

    We need a full course from scratch on this UI with one project 💯

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

    Great explanation. I had seen a couple of videos related to this pop up n RUclips, but I am really enjoying your video.

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

    Thx for the video Ed 😊 I'll try this lib my next project 🤞

  • @happycindi9155
    @happycindi9155 11 месяцев назад +14

    You are such an inspiration bro, Im in a Physics and Math course but I find coding more interesting by watching your video

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

      This guy is clueless, he is trying to convince you to code something that 20 years ago everybody was dragging and dropping. Don't fall for this scam. Front-end needs NO CODE.

    • @vvelarm
      @vvelarm 11 месяцев назад +2

      ​@@jboss1073 😂

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

    Nice video. One question, how did the program know when to show the Loading skeleton?😅

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

    Thanks for the inspiration Ed, I look forward to checking this out and having a play! maybe in a "weird" way as well 🤣 I would dig a detailed video on shadcn.

  • @OneBrighDay
    @OneBrighDay 11 месяцев назад +1

    This is exactly what I’ve been looking for thx.

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

    I'm doing my side project with shadcnui right now. It's pretty great, but one thing I dislike is that if you want to change the defaults there's still a bunch of work to do. And I'm also not a huge fan of defining dark/light mode colours through css. I know that's how tailwind recommends it, but it's just not a great dev experience. Still kinda worth it for very little runtime cost and server-side support, but I don't think I'll stick with it for the next project if something nicer in terms of custom styling comes along.

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

    I wish I knew about shadcn 2 months ago it would have saved me so much headaches while I was using material ui

  • @magnacarta7045
    @magnacarta7045 11 месяцев назад +28

    10:27 I think you could have made responsiveness better by just doing grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 on the main container instead of doing span on the child. Performance wise, this is better as well since it will only look at a single div for the breakpoints.

  • @edwinchan6521
    @edwinchan6521 11 месяцев назад +4

    I'd love to watch a full app build with shadcn, amazing share of your knowledge dude! Looking forward to more!

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

    Thanks for the video and info, first time hearing of shadcn. Gave a thumbs up for the use of 'shite' in the video too :)

  • @user-ql3vh2gj3g
    @user-ql3vh2gj3g 8 месяцев назад

    I want that desktop wallpaper so bad!!! Where do you get them please?

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

    Thanks for showing this!

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

    Nice video! Please share more information about your workspace setup

  • @nikhilsharma2421
    @nikhilsharma2421 11 месяцев назад +1

    We do want an video on this library where we will make a app using this. And thanks man for making such contents.

  • @charlesm.2604
    @charlesm.2604 11 месяцев назад +5

    I've been using HeadlessUI for a long time so this looks promising. Hopefully someone will port it to Vue and Angular if there is no official libraries for those frameworks.

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

      easier to ditch vue and angular and use a library instead

    • @charlesm.2604
      @charlesm.2604 8 месяцев назад

      @@gm42069 Do you really think it's easier to migrate entire production codebases to React than it is making a framework agnostic primitive library ? It's not.
      Besides we have our reasons to not work with React. Angular offers better development experience in collaborative workflows and Vue has symbiotic batteries-included philosophy which means we don't have to tape together a bunch of 3rd party libraries with different API designs and patterns with breaking changes for every upgrade.
      Regardless of motivations, even if we were open to make the switch it would be a challenge to port everything over and we'd be wasting 7 figures on this project all whilst pausing the development of our applications in production.

  • @FourLeafGroverRL
    @FourLeafGroverRL 11 месяцев назад +6

    I’ve never had a problem with tailwind like I have with the others. It’s just intuitive and you can easily do breakpoints which is nice.
    That looks really nice, problems I have had with material ui and others are that they are pre styled. I’d rather have someone make a component with all the functionality and none of the styles so I can just call the props I want to edit to style.

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

      Did you have a look at the mentioned radix UI? Or MUI unstyled components? Or React Aria? I think at least one of these libraries should fulfill your needs

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

      @@Rulito2405 I’ve looked into them before, they work well. I haven’t done a full project aria or radix yet but I’ll see if I can practice with it. Thanks for the tips haha

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

    At 3:27 you mention about having Tailwind as well, and all the configuration gets added. What do you mean? do these work together? Thanks for the vid

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

    I love the blue razz on the side, I use the exact same one. 😁

  • @kritstims
    @kritstims 17 дней назад

    Really loved your wallpaper man

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

    Thank you. I really liked the library

  • @IvoTsochev
    @IvoTsochev 11 месяцев назад +1

    I'll definately will take a look on this UI library but in this Skeleton example, I didn't saw what's the difference between simple styled div and this Skeleton.
    I really like Tailwind as well, what do you think about their paid UI library, you think it's worth it?

  • @walkingin6375
    @walkingin6375 11 месяцев назад +8

    You can replace all the grid media queries by using minmax(200px, 1fr) where it will take up 200px at larger sizes, when possible, and then it will take up to 1fr when not possible. instead of sm md lg xl

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

    really amazing getting started video

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

    Hey, thanks for this, it was helpful
    I'm looking for a good React Native library that has official components or a design system in Figma, so I can create my designs baasd on it and then the developers will be able to use that library, do you anything can do that?

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

    Would love to see a vid with you using this tool - Your hair is looking breath taking btw...

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

    There's also Mantine UI which I think is pretty overlooked.

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

    So helpful - many thanks!

  • @dev_franqqi
    @dev_franqqi 11 месяцев назад +3

    I’m gonna be stacked for the summer ,learning more libraries while creating projects with them >>>

    • @lukas.webdev
      @lukas.webdev 11 месяцев назад

      Sounds like a good plan 😉

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

    Your content is pure gopd Ed ❤

  •  11 месяцев назад

    Lesgooooooo for building a full app with it, i'm here for it !!

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

    Ive used this at work once, was pretty good tbh 🤟

  • @carlobottaro4333
    @carlobottaro4333 11 месяцев назад +1

    Wow! Awesome I will try out this for sure, what’s the font you’re using on vsCode? It’s amazing!!

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

    I'm gonna subscribe because I'm gonna wait for you to create a full app with these ui components

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

    great vid! how can we get dynamic data based on your api instead of hard coding 12?

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

    is there any other tailwind based ui library that worked with approuter

  • @main-sama
    @main-sama 8 месяцев назад

    Hi, I follow code along but, when add new Promise resolve. It won't show same effect. It's load entire page instead of component only. Did I miss something?

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

    got some questions :
    1)is that Array.from any new syntax , cus i have never seen it before.
    2)Can we use it with Vite ? Would it show any depreciation of some sort ?
    thank you.

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

    I love Chadcn UI, thank you Ed!

  • @FzsHotDogInDonut
    @FzsHotDogInDonut 11 месяцев назад +2

    side note , shadcn/ui exclusivly for typescript. no norm js

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

    may i ask how do ur right css styles inside className ?? how does that works is that feature on react or what??

    • @evolve-yt
      @evolve-yt 7 месяцев назад

      tailwindcss

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

    i like this your camera angle in video, need 1 longer video pls

  • @AhmadMughal1
    @AhmadMughal1 11 месяцев назад +6

    I've used DaisyUI for doing the same purpose and it works wonderfully. The option to create themes and change whole website with a single theme makes it quite pleasant experience.

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

      I would love to learn how to use daisyui-react. Do you know any videos you can point out that teaches it or any resources I can read?

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

      My favorite.

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

    Really Great!!

  • @elhaambasheerch7058
    @elhaambasheerch7058 11 месяцев назад +17

    I would love a detailed tutorial and app build with this.

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

      Stop! Learn how to build UI by dragging and dropping. Do not write code where it is not needed. UI code is never needed. 20 years ago everyone was dragging and dropping their UIs, no one was writing code for it! Learn the history of your field and stop being fooled!

    • @yakob-g
      @yakob-g 11 месяцев назад

      @@jboss1073 what :D elaborate

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

      @@yakob-g oh man I just wrote an entire reply but it got deleted

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

      @@yakob-g do you really not know? summary: google "graphical user interface builder". They were invented in 1987. Industry doesn't use Webflow, Framer, Plasmic, because they're big-player fad-followers and want to copy what Facebook is doing so they use React as a way to keep the backend programmer busy with front-end FORMATTING work that is not programming, but they sugar it with programming, call it React, and programming-history-ignorant programmers eat it up, and make our industry the poorer for it. As a programmer you are an expert! A specialist! Don't do the job of artists! Demand artist do the front-end. They can do it with Webflow, Framer, Plasmic, etc. The industry needs to grow up and stop following fads. Capitalism is about competition, not copying your competitors. Everyone knows how to make another Coca-Cola but the value is in the name, hence why Pepsi will forever be second place. The programming industry thinks they can get ahead by "also doing React like everybody else!" because they don't think like adults. And they have the gall to tell you their React thingy is good enough to design your website but not good enough for them to design a GUI builder for you! And programmers accept that!

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

      @@yakob-g I had written a much better reply but youtube deleted it so you'll have to be happy with that one above. Ask any questions if anything is not clear. But please start thinking more critically, how did you not notice front-end was the job of ARTISTS and not programmers? Was the fact that HTML is a FORMATTING and not a PROGRAMMING language not a clue?

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

    Nice, This is what I really need now. A big help, Thank you.

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

    Thanks very much for this vid. but does this library have peer dependencies like MUI or others?

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

    Another game changer!! That's three new ones I've seen today, what a time to be alive -- WOOT!!

  • @u-def
    @u-def 11 месяцев назад

    I've been wating for new material UI of web ui!

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

    So cool ! Thank you 🎉🎉

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

    Hey do you have a link to your dynamic wallpaper? It looks super cool!

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

    i liked it ,sure i will try it in my next project

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

    Really great video ! Take my subscribe ! I didn't know about Redix and Shade !

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

    There isn't many videos about radix ui or shadcn, please bring more videos!

  • @hehe-bm5gc
    @hehe-bm5gc 8 месяцев назад

    i havnt wrote a line of tsx/ts code in my entire life and never used react andsomehow i understand everything you did

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

    I already fallen in love with this UI

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

    Bro, make a full detailed video on shadcn. I loved the idea of it. It gives me the feeling like I am free.

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

    Always come up with new things

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

    Have been using shadcn ui and it is awesome no cap

  • @imgsrcxonerroralertdom-xss9150
    @imgsrcxonerroralertdom-xss9150 10 месяцев назад

    very good tutorial , i will try tomorrow something with this :D

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

    Very nice, thank you dear Ed! :)

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

    I have used FluentUI with SPFX and React. It's awesome. It's responsive implementation could be better though.

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

    Hey Ed, quick question, why are we able to see a loading screen when we are supposedly getting all the HTML populated back from the server because we are using a React Server Component? I don't get that yet. Why we have a delay between the API request and the rendered page?

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

    LOVE , LOVE , LOVE! YOUR CONTENT!!!

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

    cool video! i have to ask, where did you get that live background?

  • @lukas.webdev
    @lukas.webdev 11 месяцев назад +2

    Very interesting!! Haven't heard of it but sounds really useful... Thanks for the tip 😉 🔥
    "This React UI Library is (A) GAME CHANGER!" 😜

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

    A whole app using a shadcn is an amazing idea

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

    Tailwind is definitely S tier!
    Also, from where did you get your desktop wallpaper? It's beautiful.

  • @EricOnYouTube
    @EricOnYouTube 11 месяцев назад +1

    Well done. Thanks.

  • @iAmTheWagon
    @iAmTheWagon 11 месяцев назад +2

    I would love to see a more in depth video. ❤

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

    you're amazing! Thank you

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

    can you share your desktop background, its awsome!
    thx on your knowladge and sharing it with us!

  • @98f5
    @98f5 11 месяцев назад

    what server are you using for this app that lets you have async jsx elements

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

    like it a lot, tnx for your work

  • @98f5
    @98f5 11 месяцев назад

    to use wierd numbers like 84 and 86 you need to do it like h-[84] and you need just in time loading on tailwind css

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

    Two questions. What is the theme you're using in vs code? And also, is it possible to use shadcn with angular? I don't see support for it :(

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

    can we really mix between tailwindcss and these UI libraries ?? Like there won't be any messed up styling problems ?.

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

    Yes, please a video on shadcn ui. Thx

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

    Awesome video!! Love it

  • @sujoydutta920
    @sujoydutta920 10 месяцев назад +1

    Material UI is best for me have been working for 4 years now and I just enjoy using this and testing its reach

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

    Mantine v7 has over 100 UI components ready for use. Shadcn is useful for simple apps

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

    i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag as we are making trading platform. what should be the ideal css framework for making component lib for react native app?