Unstyled Component Libraries Are A Game Changer

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 240

  • @BeeBeeEight
    @BeeBeeEight Рік тому +165

    I like that some of those libraries mentioned are accessibility first. Too many frameworks are singularly focused on the visual presentation that they forget sometimes their users probably can't even see their fancy colors or smoothly curved buttons. I especially like the one by Adobe, you can see that they really made the components as accessible as possible. Thanks Kyle, for introducing them to us.

  • @mustaquenadim
    @mustaquenadim Рік тому +201

    1. React Aria
    2. Downshift
    3. Base UI
    4. Radix
    5. Headless UI
    6. Reach UI
    Suggested from audiences:
    7. Lion (Unstyled web component)
    8. React Table (Headless table)

    • @PaulGerarts
      @PaulGerarts Рік тому +4

      lion web components

    • @TwoLeggedTriceratops
      @TwoLeggedTriceratops Рік тому +12

      Too bad a lot of those are for React only. These unstyled component creators could benefit in using Stencil/Lit to make it framework agnostic and future-proof.

    • @vissaf
      @vissaf Рік тому +1

      react-table for headless tables

    • @bugzpodder
      @bugzpodder Рік тому

      Zagjs, Reakit/Ariakit, @mui/base

    • @shihou22
      @shihou22 Рік тому +3

      shadcn/ui

  • @Xe054
    @Xe054 Рік тому +30

    I've ran into the problem of not being able to customize my components to my liking so many times. Thanks for covering a hidden topic that I don't see many people talk about.

  • @vissaf
    @vissaf Рік тому +20

    These headless alternatives are pretty great. Especially for something like tables and datepickers. Using your own markup and the library's logic. It's the best of both worlds imo

  • @VimalKumar-ts7xn
    @VimalKumar-ts7xn Рік тому +32

    btw mantine also allows to keep all the functionality of the component while, allowing to use the unstyled components
    you just neeed to pass the unstyled prop to the component and style it using the style api

    • @ChristofferLund
      @ChristofferLund Рік тому +6

      Yeah seems weird to call out Mantine when it can both be a fully featured UI library or just a headless UI library.

    • @WebDevSimplified
      @WebDevSimplified  Рік тому +14

      I did not realize that. That is cool.

    • @SenorScriptKitty
      @SenorScriptKitty Рік тому +2

      I been using Mantine at work and its great, its so easy to make it look like the designs in Figma.

    • @nanonkay5669
      @nanonkay5669 Рік тому +3

      Mantine was an absolute game changer for me. It's absolutely amazing. I'm so bummed out that there isn't nearly enough videos about it out there, it's a damn shame

    • @JamesJosephFinn
      @JamesJosephFinn Рік тому

      @@WebDevSimplified hey brother, great channel. For this training in particular, it would be helpful to see your perspective on bringing these libraries into a Wordpress environment. An example use case could be custom fields in a Woo checkout form. Consider it! Peace bro.

  • @carolinadelaossa7383
    @carolinadelaossa7383 Рік тому +8

    I was just struggling with this yesterday. I have a very small personal project with very particular styling, and I was debating whether I made my components from scratch or use a CSS library and re-style it's components (which I also hate doing). Your video came up at the perfect time for me haha thank you so much!

  • @perfect.stealth
    @perfect.stealth Рік тому +26

    I’ve always been an advocate of never styling components because they are used in so many different sites which results in backwards development, wasting time on overriding styles and remove classes

  • @bobdinitto
    @bobdinitto Рік тому +2

    Awesome, Kyle, these libraries look like a great way to save time and get just the styling we want. I'm already building a component library so this will fit right in. Thanks for this I always get new ideas from your videos.

  • @juanalbertoboada
    @juanalbertoboada Рік тому +1

    And finally it is coming! I have been thinking about this for so much time...I have gone thru many projects requiring these kinds of libraries.

  • @Daijyobanai
    @Daijyobanai Рік тому +3

    It's amazing that no-one popularized this before, theming and changing existing themes is a proper PITA.
    However, a checkbox should use the semantic input type and not button. One of the things I don't like about modern web is the constant re-writing of the standards by people who don't know better. And in a video that mentions accessibility several times over, then goes on to use an example that breaks WCAG/accessibility rules.

  • @sasha777tube
    @sasha777tube Рік тому +7

    Well...I'm one of the people who just created my own customized ui library (select, checkbox, datepicker, calendar etc.) and added in all the accessibility features. It was in fact a pain in the neck. However, in the end I got exactly what I was looking for and I learned a lot more than I bargained for. It took me a little less than a year...smh.

  • @MyBaBB
    @MyBaBB Рік тому

    Thanks, I am Ready to jump right in to Libraries now. Finally...It took along time to get here.

  • @eliamzg
    @eliamzg Рік тому +4

    This would have saved me so much trouble two years ago 😂 this hits a sweet spot between efficiency and customization, love it. Will check them out, maybe replace some of my own components with these.

  • @joaotextor4094
    @joaotextor4094 Рік тому +1

    Gosh, how much time trying to customize MaterialUI components. I should have known those libraries ealier.
    TYVM!!

  • @wolffparkinson
    @wolffparkinson Рік тому +8

    It would be worth checking shadcn/ui. It is radix ui + tailwindcss. Components aka primitives can be copy pasted to the components directory just like radixui

  • @Matrium0
    @Matrium0 Рік тому +1

    Angular Material has been doing that for years. You get the base functionality with Angular Material CDK (Component Dev Kit), without any styling. You can than either style that yourself, or use the full Angular Material with their opinionated styling.
    It really is the best of both worlds to implement a library that way.

  • @user-eh3ey7is5e
    @user-eh3ey7is5e Рік тому

    I love all ur lessons, they are broken down everything detail to simple 👍👍

  • @jann2418
    @jann2418 Рік тому

    At work I write components like this for the company's crm pwa . It can be challenging, but I rather like being challenged than doing the same thing over and over again. I enjoy doing this and everyone at the company understand it takes as long as it takes, so I don't need to feel stressed.
    It might take longer to write your own components like a datepicker or a calendar but it has lot's of benefits:
    - You only have features you acutally need so less unused code.
    - You can add features any time and even add features others don't have.
    - You can optimize your algorithms for your specific scenario to deliver the best user experience.
    - You are in control if and which libraries are used and that can be important for performance.
    - You know what you have and don't need to rely on bad documentations or stack overflow to make a simple feature work.
    - You don't have to rely on a third party to update the component when you want to progress to a higher version of your framework.

  • @bignah4872
    @bignah4872 Рік тому +1

    I was just thinking about it, and you made a video, awesome!

  • @tonyg_nerd
    @tonyg_nerd Рік тому

    Kyle, you itemized options to use common libraries, DIY, or work for huge corps. Another option is to buy well-supported libraries. Kendo comes to mind but there are so many others. I'm too cheap to buy right now, prefer DIY like you, but I have bought licenses in the past and this is a valid option to trade money for time. As a colleague of mine says "FOSS is only free if your time is worthless". Of course that focuses on the beer and not liberty definition of free, but the point has a lot of merit. Also, buying good software helps to keep good developers doing good work. There's a lot to be said about that too. Best to ya.

  • @snekface1707
    @snekface1707 Рік тому +1

    You are the single best source I use for learning react. You've taught me so much, and I truly appreciate every one of your videos!

  • @ngaji_it
    @ngaji_it Рік тому

    Thanks a lot, you save my time. Before you create this video, I have been using only tailwind and react ans then think about how to build like dropdown or advance select just using those two tools

  • @canaygun5234
    @canaygun5234 Рік тому

    Very useful! Thanks for the video. It does sound nice to build a design system around one of those unstyled component libraries.

  • @danielzaiser
    @danielzaiser Рік тому +11

    you mentioned aria a ton of times, i will take some liberty and post a quote from mdn docs ARIA page:
    "Warning: Many of these widgets are fully supported in modern browsers. Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. For instance, native elements have built-in keyboard accessibility, roles and states. However, if you choose to use ARIA, you are responsible for mimicking the equivalent browser behavior in script."
    and also:
    "Note: There is a saying "No ARIA is better than bad ARIA." In WebAim's survey of over one million home pages, they found that Home pages with ARIA present averaged 41% more detected errors than those without ARIA. While ARIA is designed to make web pages more accessible, if used incorrectly, it can do more harm than good."
    i think we should disability test native components, and only if insufficient support is detected, then fallback to aria solutions.

  • @Art-y2k
    @Art-y2k Рік тому

    Thanks for this Kyle. I'm going to look at this when I start my next project

  • @caerulemusic
    @caerulemusic Рік тому

    ayo i was just reading a bunch on this topic and of course you just released a vid on it!

  • @IvanRandomDude
    @IvanRandomDude Рік тому +53

    They should be the standard for FE oriented devs. I always left that Boostrap, MUI and similar libs are more meant for Backend and full stack devs to help them make decent UIs quickly. FE specialists should never use those libs imho.

    • @ruyvieira104
      @ruyvieira104 Рік тому +11

      Bootstrap is for getting shit done, mui for pretending you're making an Android app

    • @twothreeoneoneseventwoonefour5
      @twothreeoneoneseventwoonefour5 Рік тому +8

      Frontend is not only about writing pretty uis. Some frontend devs are there to make dynamic working uis, regardless of styling.
      Example: I am writing an interactive map project which is used internally inside the company. I don't need to write any styles myself. If I can make a decent ui without doing most of the work, it is a win. My main job is making sure that data visualizes interactively.

    • @PatrikSticha
      @PatrikSticha Рік тому +1

      That might have been true with bootstrap 3 or so, but ever since bootstrap 4 came out it actually turned out to be highly customizable library, great base for FE devs to start building the project. Can't agree that it's meant mainly for BE devs. It's really a quick way to introduce a build system into your project and customize it efficiently. I feel like good js library should always be divided into tree shakeable modules, therefore the appearance module (css) should be optional by design.

    • @daleryanaldover6545
      @daleryanaldover6545 Рік тому +1

      @@PatrikSticha I think bootstrap 5 is the most lit, I've used 4.3 back then and there hasn't really ground breaking change from version 3. Version 5 was inspired from tailwind utility classes so bootstrap is much more easy to build custom prototypes.

    • @PatrikSticha
      @PatrikSticha Рік тому

      ​@@daleryanaldover6545 Well I started somewhere around bs 3.3 and back then it was more about rewriting the default classes, ever sice bs 4 introduced default variables, the whole bootstrap became basically this huge customizable framework, which made it possible for you to make sites really unrecognizable from the default bootstrap theme, but keeping their tidy, flexible system. I really think the biggest progress in bootstrap was really introduced transitioning from version 3 to version 4. Version 5 of course brings some major improvement and event more possibilities to making more customizable environment, no doubt about it :)

  • @TeaganAtwater
    @TeaganAtwater Рік тому +10

    I love Radix! Been using it for over a year now, my only complaint is that particular components I could really use (combobox, carousel) are still in development or haven't even been started yet and I don't have the skillset to contribute them myself :/ But I'm still a diehard fan of what they're doing!

    • @smileyface6837
      @smileyface6837 Рік тому +2

      Haven't found a good carousel solution but for combobox my go-to is headless ui

    • @Pazdkq
      @Pazdkq Рік тому +3

      @@smileyface6837 carousel is actually bad ux approach, you can google why

  • @SarthakJain12
    @SarthakJain12 Рік тому +1

    Hi there Kyle! Great content as always!
    An off-topic question - I know you're using Windows, but I've never seen such smooth animations while expanding a window like that at 6:06. I have a laptop running Windows 10 which cannot be upgraded to Windows 11 sadly, are you running Windows 11 which adds this kind of animation?

  • @gaius_enceladus
    @gaius_enceladus Рік тому

    Absolutely agree - unstyled component libs are the way to go!

  • @theisoj
    @theisoj Рік тому +3

    I just thought the same thing! Thanks Kyle as always!

  • @joe-robin
    @joe-robin Рік тому

    Thanks for these videos man, I could just pick one of these and style them with tailwind.

  • @michaelanthony4750
    @michaelanthony4750 Рік тому

    Thanks for the pragmatic videos.

  • @ShaharHarshuv
    @ShaharHarshuv Рік тому +1

    The concept of creating custom hooks to manage the state of a component completly seperately from the view in genius. Especially in situations like these.

  • @ekchills6948
    @ekchills6948 Рік тому +7

    Daisyui is so good as well. It's really customizable too

    • @capt.potatohead
      @capt.potatohead Рік тому +1

      I wonder why not many people talk about it!

    • @EIsenah
      @EIsenah Рік тому +6

      Good? yes
      Customizable? Not so much.

    • @victorlongon
      @victorlongon Рік тому +1

      ​@@EIsenah you can use it without any styles if you want to

    • @h3nry_t122
      @h3nry_t122 Рік тому +1

      @@EIsenah believe it or not. if you just use "btn" instead of "btn btn-primary" you can customise the button yourself 🤯.

    • @daleryanaldover6545
      @daleryanaldover6545 Рік тому +1

      @@h3nry_t122 it really comes down to how daisyui do the html markup in their components, the first time I saw the source code of some of their components like navbar, it rekindled a burning flame in my chest, remembering all the past suffering I endured with pre-built components back in the day. So I decided, screw daisyui, I'll just make my own component library 😂

  • @kentmiggalen9756
    @kentmiggalen9756 Рік тому

    Thank you so much for letting us know this.

  • @CivicYt
    @CivicYt Рік тому +4

    I'm just curious of why all this isn't native html yet.

  • @atanu_mojumdar
    @atanu_mojumdar Рік тому +1

    Love your work buddy 💜

  • @Kraboobee
    @Kraboobee Рік тому

    Every time I hear that guitar intro the Nimbasa City theme gets stuck in my head

  • @WTFAnyNameWorks
    @WTFAnyNameWorks Рік тому

    This is perfect for me, thank you!

  • @nsrc9583
    @nsrc9583 Рік тому +1

    For anyone considering writing your own input components beyond basic text input (e.g., dates or, god forbid, rich text input), know that it's a long, painful road. I've gone down the path precisely because of the problem Kyle mentions, and you're going to run into so many gotchas-browsers handling input elements differently, known bugs within the browsers themselves that you'll have to work around somehow, dealing with unicode, accessibility, security, floating point precision, testing... you'll learn a lot, but it will cost you lots and lots of time.

  • @joesharp3580
    @joesharp3580 Рік тому

    I just love your channel.

  • @spidfair0
    @spidfair0 Рік тому

    Thank you for shedding light on this topic. I've been looking up the libraries you mentioned (and others) and I will definitely give them a try, but I'm little concerned regarding their bundle size. It looks like using even the simplest hook/component increases code by a few 10KBs. I would expect them to be more lightweight.

  • @QueeeeenZ
    @QueeeeenZ Рік тому +1

    PrimeVue is also heading towards the direction of unstyled components which is pretty awesome.

  • @Tom-xr4qy
    @Tom-xr4qy 7 місяців тому

    Mantine has a great styling possibility. Just read the documentation and you can completely restyle components in a valid way.

  • @pkvpraveen
    @pkvpraveen Рік тому +1

    I am in search of a date range picker which will work on mobile as well as desktop. Material UI one works but I have to install the complete library for it. It would have been great if we could install just the date picker. Now let me see if there unstyled libraries are of help

  • @608_diesel
    @608_diesel Рік тому

    Excellent information! I can see that Adobe library pairing really well with Tailwind.

  • @a_maxed_out_handle_of_30_chars

    thank you, simple and to the point :)

  • @nro337
    @nro337 Рік тому

    Great video!

  • @silviabaer
    @silviabaer Рік тому

    Cool video, thank you!

  • @tonyg_nerd
    @tonyg_nerd Рік тому

    Given that creators of good components are removing their styles, leaving us with libraries of unstyled components, the next thing I think of is : where are the complete libraries of CSS (SASS, LESS...) that have nothing but styling for every HTML control? New vid? Thanks for all you do, Kyle!

  • @muhammadmusab6334
    @muhammadmusab6334 Рік тому +1

    I really like the Radix. I think, it is great for creating components with anything and faster.

  • @diesunddas405
    @diesunddas405 Рік тому +3

    A new guitar? Nice

  • @twocsies
    @twocsies Рік тому

    There are some libraries that allow you to pass in replacements for components like Input or Text, which allows for default styling but also updating the styles.

  • @SXsoft99
    @SXsoft99 Рік тому

    been working with vueJS3, taking in to account that vue has been using TailwindCSS for some time now most of the components/packages have been remade to have default styme but with a config to overwrite them easily
    as for me I just made a js file to export a default object and reuse it where I need, I don't know if it's the best approach in JS but eh constants are constants in my book coming from PHP

  • @shivangrathore
    @shivangrathore Рік тому

    I might work on unstyled primitive components as a side project for learning sake.

  • @mkammyd
    @mkammyd Рік тому

    I am looking for a searchable drop-down menu is there any component for it ? Also for ionic angular as well

  • @JawsoneJason
    @JawsoneJason Рік тому

    Ah-ria vs

  • @ololosh40k28
    @ololosh40k28 Рік тому

    thanks! very useful😃

  • @theclockworkcadaver7025
    @theclockworkcadaver7025 Рік тому +1

    It's unnerving how you waggle your head side to side constantly but NEVER break eye contact.

  • @martijn3151
    @martijn3151 Рік тому +1

    I do care about the design and style of my site and I’m perfectly happy with the design for instance MUI provides. Not entirely sure why you would imply that those things are mutually exclusive.
    To me personally CSS equals hell, so taking that burden away from me is a big big advantage.
    In fact I would be interested in taking your approach in reverse: It would be cool though if we could easily style an unstyled component so that it looks like a MUI component.

  • @DeolisN7
    @DeolisN7 Рік тому

    Те, що я шукав! Дякую 🤝

  • @zainharoon7468
    @zainharoon7468 Рік тому

    Hello Kyle, I love your videos. They are always very informative.
    I want your suggestion on 2 points that I can't get my head around.
    First is about choosing a Web Framework, I'm kind of curious of every pros and cons of each web framework our there like Svelte, Solid, React, Vue. I know React, A little (solid, vue and svelte) but i want to have the best one in my skill set too i cant decide what should i master (atleast 2).
    Second is about styling, I cant decide about what to choose from Ui Libraries, Tailwind, Styled, Css Modules, or and simple plain css with css preprocessors. I heard Styled-components have their compile time so i cant decide what to master (atleast 2).
    You can say I'm free to choose what sould i built in with. But choosing the best and the cons of everything in mind doesnt get me to the point where i could choose what to do.
    I have touched all of these but never actually made something.
    I used MUI. But the thing about styling or custom requirement it becomes difficult to modify.
    I dont work under anyone who may assist me on how i'm doing so that I could know where i lack or something that i need to improve more.
    Can you please help me in this scenario?
    Thanks and Lots of Love.

  • @francoisconsigny9106
    @francoisconsigny9106 Рік тому +3

    Finally ! i was hoping someone talk about the way actual CSS library are a mess to customize. And lets be clear, we never want the exact copy of the component we are seeing in the library documentation !

  • @kevbonett
    @kevbonett Рік тому +2

    Hmmm... so the custom checkbox example uses a element with a role="checkbox". WTF. 😢
    This is why I generally hate libraries. So often they simply use the wrong markup, and set a really bad example.
    1st rule of ARIA = don't use it if there's a native HTML element that does the job.

  • @Binxalot
    @Binxalot Рік тому

    How is this better than specifying the input type attribute to be date, and letting the browser handle the date picking? If you use it'll use the browser's built in date picker, it works on all major browsers and you don't even have to adjust for mobile, it just works and requires zero css or extra external libraries.

  • @ANOLBEE
    @ANOLBEE Рік тому

    This is so true. I have made things from the scratch much faster than trying to use already built components and getting them to fit.😅

  • @kamalsomani285
    @kamalsomani285 Рік тому

    Did created any tutorial for creating your own design system and how to distribute it or use it with any project ?

  • @JohnPKusumi
    @JohnPKusumi Рік тому

    What do you use for the video mixing, where you share your screen plus have a small round view of yourself talking? You were able to relocate the circle on the fly in this video, that was cool. ))

  • @programming8840
    @programming8840 Рік тому

    Hello, what about Shoelace (Framework-Independent Component-Based UX Library) vs these

  • @nabinsaud4688
    @nabinsaud4688 Рік тому

    I love chakra + tailwind css

  • @sephiroth668
    @sephiroth668 Рік тому

    How well do these libraries work if the user has javascript disabled at the browser level? If accessibility is one of the main points of these libraries, do they fail gracefully and still function with javascript turned off or does the website completely take a dump on itself if javascript is disabled?

  • @steckrein6322
    @steckrein6322 Рік тому

    Is there a good option for unstyled image carousels and drag and drop sortables? I currently use Swiper as a carousel, which is very easy to use, even with mouse drags, but difficult to style. For drag and drop I use dnd-kit, also a very good library. However, I would like it better if a Ui library already had this integrated to simplify implementation.

  • @twiggy99
    @twiggy99 Рік тому +1

    As someone who just can't take to React no matter how many times trying with both small projects and enterprise level projects the amount of code needed here is just mind boggling. all that JavaScript to creat a button which has also now tightly copolued your view layer just still feels mimd blowing,the datetime picker code example is even worse. maybe 1 day it might click for me but all i see is down sides and those concerns only get deeper the more i learn and use react in real world projects

  • @gorilla-san
    @gorilla-san Рік тому

    😭😭😭😭😭 I just finished an angular members' area /Project creation and ordering website for our users.
    I had to wrestle with material UI and then decided to just drop it and do everything custom.
    Along the way I was thinking, wish there was an unstyled library that I can just style how I want. But thought no way there is a thing like that. If I bothered googgling woulda saved me so much time.
    Anybody can recommend any for angular?

  • @tonyg_nerd
    @tonyg_nerd Рік тому

    What gets me about having so many options is that it's up to us, the dev/consumers, to find where each UI package shines, which helpful compound controls they add, and which ones they're missing. Until they remove their styling, each of us also needs to go through their CSS to see how they work, and that stuff isn't documented well or at all. It would be ideal if we could, for example, apply MUI styling on Adobe or Reach or Downshift controls. When it comes down to it the exact same W3C elements are being styled with the exact same W3C CSS, so why isn't it more interchangable, like PC hardware or after-market car parts? Anyway, Kyle, do you have any insight into this concept of mix/matching style libs on unstyled controls? Or control-level comparisons in control libs? Thanks man!

    • @nsrc9583
      @nsrc9583 Рік тому

      Thought I'd answer one part of your question because I've contributed to some open source browsers. You don't see that interchange because W3C standards don't say anything about implementation. That's up to the browsers. So what you end up with is a lot of different ways to do the same thing across browsers. And if you don't do it the way browser X requires, it won't render in browser X. Another thing is implementation turnaround time. Some browsers take a while to implement approved standards, others very quickly. Chrome tends to implement fast, Firefox takes some time, and Safari kind of just does whatever. Finally, some browsers are more willing to try new or proposed specs than others. Edge tends to hesitate with new specs until everyone else gets on board, and Chrome is almost always the pack’s leader.
      W3C intentionally never mentions anything about implementation because specifying implementation would stifle competition, and you'd almost certainly end up with one browser controlling the entire market (e.g., Internet Explorer from the late 90s to the early 2000s). We've learned that browser monopolies are not a good thing-once IE got control, Microsoft completely stopped working on it.

  • @casperon7
    @casperon7 Рік тому

    Customising Mantine is easy and works great

  • @paragateoslo
    @paragateoslo Рік тому

    This have actually been around in the Angular community with Angular CDK for years.

  • @Qushaak
    @Qushaak Рік тому

    I would like to see such "functionalities" in widgets/components libraries like DevExpress, Syncfusion, Telerik,....

  • @Pazdkq
    @Pazdkq Рік тому

    1 thing I cant understand is why there is so many libs with same functionality, I mean even unstyled components, lets say there is around 20 libs already, why are they reinventing the wheel?

  • @nabzoku
    @nabzoku Рік тому

    Cries in ' !important '

  • @nizarkhatri6237
    @nizarkhatri6237 Рік тому

    which one is the best unstyled component library?

  • @Bauxitedev
    @Bauxitedev Рік тому

    Are there any unstyled components libraries that work with Vue too?

  • @LoneWolfCodingProfessional
    @LoneWolfCodingProfessional Рік тому

    in order to create a components that custom
    first create a separate components first
    like creating all components at all once then select
    fonts
    color palletes
    must all be scss
    default page
    after that your components are more reusable
    you just import it to your app in class

  • @caradebreno
    @caradebreno Рік тому +1

    Does someone know a library like that to Angular? Search I only found someone saying that I could use Angular Material without importing the styles.

  • @markzuckerbread1865
    @markzuckerbread1865 Рік тому

    as someone who used antd in a commercial project at a company, having to force the components to fit the designers styles is a massive waste of time and I'll definitely consider these libraries the next time I'm working on a site with a strict design :)

  • @leonvanrijswijk8409
    @leonvanrijswijk8409 Рік тому

    What are the best unstyled components libraries if you are not using any framework, but just html/css/javascript?

  • @murodjonturgunov2328
    @murodjonturgunov2328 Рік тому

    Kyle is awesome 👍

  • @3dxspx703
    @3dxspx703 Рік тому +4

    For web, why not just use html elements if u want unstyled.?

    • @arjundureja
      @arjundureja Рік тому +2

      Default HTML elements are not fully accessible. You need to add tons of different attributes and logic to ensure it works with screen readers, voice over, different display sizes, etc

    • @3dxspx703
      @3dxspx703 Рік тому

      @@arjundureja oh really, haven't really started react at web, but been studying react native for a while.but thanks for the info!

    • @TeaganAtwater
      @TeaganAtwater Рік тому +1

      Also many parts of HTML elements cannot be styled at all (like the drop-down list in a select), leaving much to be desired from an aesthetic standpoint. If we were allowed full customization of standard components there would be no need for these extra packages

  • @neirenoir
    @neirenoir Рік тому

    I would like to recommend Lion webcomponents for the ultimate vanilla experience.

  • @gs-443
    @gs-443 Рік тому +9

    the main reason I always try to avoid component libraries is how hard is to style them!

    • @daleryanaldover6545
      @daleryanaldover6545 Рік тому +2

      I resonate with this on a spiritual level. That is why Tailwindcss is godsend since it solved most problems I faced with these pre-built component frameworks. Combined with these new headless UIs, we are on to great DX.

  • @jerryf196
    @jerryf196 Рік тому +3

    Would Angular CDK lib be considered this concept?

    • @DirkLuijk
      @DirkLuijk Рік тому

      I believe so, yes. Would fit best in the component-based category I think.

  • @hamzaomenxx1299
    @hamzaomenxx1299 Рік тому

    Make sure to take a look at Shadcn UI

  • @abidube0
    @abidube0 Рік тому

    This libraries can be used in react native with nativewind?

  • @microspacer
    @microspacer Рік тому

    Great topic! Can you please help me to find any unstyled accessible navbar?

  • @owenwexler7214
    @owenwexler7214 Рік тому

    Yeah, unstyled/headless component libraries are definitely the new wave. We want to style our own apps without wrestling with a UI library that wants things to look their way.

  • @devperatetechno8151
    @devperatetechno8151 Рік тому

    its there any premade web components library?

  • @fatihaelbouchaoui
    @fatihaelbouchaoui Рік тому +3

    Hey Kyle, I just started learning Reactjs and I'm a little bit confused, should I go through the old documentation or the newer one? I'll be grateful if you make give some insights about this topic. 😄

    • @alarice2136
      @alarice2136 Рік тому +6

      The new one for sure. Definitely spend some time on their tic-tac-toe tutorial.

    • @juandev5348
      @juandev5348 Рік тому +1

      You should start with the newest one, it contains a very good guide of 80% of the features that you will use the most with react. When you finish it you can go back to the old one to delve into more complex topics

    • @ggff2269
      @ggff2269 Рік тому

      Have you learned ES6? Things will go smooth if so. Better to learn one topic per day to avoid confusion. Basics -Routing-Hooks -Requests--Advanced

    • @fatihaelbouchaoui
      @fatihaelbouchaoui Рік тому

      @@ggff2269 Yeah I learned everything I need to learn to react, it felt different at the beginning but I can say I started to understand the basics and how things work in react.

  • @geochampapp
    @geochampapp 11 місяців тому

    Are there any for angular?

  • @jinalter
    @jinalter Рік тому

    Do we have those but for basic html/css? I'm a beginner and I dont think I can skip to React without mastering js