Why you should use Component Libraries
HTML-код
- Опубликовано: 4 янв 2023
- You should use a component library because you will never finish that side project or idea because you spend too much time playing with Tailwind
Join this channel to get access to perks:
/ @james-perkins
Follow me on:
📃 Website/Blog: jamesperkins.dev
👉 Twitter: / james_r_perkins
👉 Linkedin: / james-perkins-268992a4
👉 Github: github.com/perkinsjr
👉 Discord: / discord
👉 Twitch: / jamesperkins 
Наука
What do you think about component libraries?
I find myself spending more time trying to add specific functionality to already-existing components from these UI libraries than building them from scratch. Tailwind + HeadlessUI has been my and my team's go-to for the past couple of months.
I agree, they're good for getting something together quickly.
The issue is that users always ask for what they think are minor changes (the font is still way too big when using font-xs, that combo-box should have look-ahead typing AND be a multi-select, what if I want that fade-in/fade-out to also blur the background with an oversized logo instead of showing the controls behind it) that can't easily be accomplished with a ported component (or combination of them).
I use it to get MVPs out, but when we're looking at a polished version of the app (and any components simple enough to do from-scratch to begin with), using pure CSS/SCSS/SASS or Tailwind is a must.
The whole point of these frontend libraries (React) and frameworks (Angular, Vue, Solid, Svelte, etc.) is to create CUSTOM components with easily manipulable behavior that YOU can reuse for multiple situations. Start cheap, but go big or go home on your final product (production-ready, enterprise edition of any app). Yes, I know the "R" word is coming, but when you start with a component library and JS, it 100% makes sense to convert to TS and custom components for stability and consistency of expected, specific behavior.
Two reasons I use component libraries :1) it saves time. 2) I dont have a good taste for design. I remember back in the days when bootstrap was popular I created a landing page using pure css, I was very proud of my design, and another using Bootstrap . Showed to my wife to choose the nicest of them. She picked the Bootstrap one, said that it looked nicer, more modern, easier on eyes. After that I rarely used pure css for my projects
these are great reasons!
i feel you brotha
I like to write my own components, and keep copying/pasting and improving them every time
Building your own component library! Also a great option.
My team has had great success combining mantine and tailwind. Any time we need to customize a mantine component we slam some tailwind classes in and they play super nicely most of the time.
I just did this for some stuff at work love the combination
Holy. DaisyUI is literally what I was looking for and I had no idea it existed. Thanks.
We use MUI (formerly Material-UI) as React Component library at work. I have a personal project that still uses Bootstrap (and is a mess). This video helped me learn about DaisyUI, Mantine, etc. It's difficult to decide if you don't know those libraries upfront. However, I'd always use a component library for the exact same reasons you have in your video. 😉
My only problem with UI libraries is that if you come across companies that incorporated an old version and never bothered to update the project with the current UI version, it is a nightmare trying to update everything to the current state.
What are your thoughts on native web component libraries like shoelace and microsoft FAST compared to react based libraries for building long term design systems?
Shadcn seems like a good all round solution
I am a tailwind purist, but I still liked and subscribed. TailwindUI templates + components have been pretty decent for me
Let’s go! The purists are showing up
agreed!
Interesting take. I transitioned off comp libs like mui & mantine to tailwinds / headless, plus daisy (just for the semantic colors and themes). True, can't throw together UI quite as quickly as w/ traditional comp lib, but have lot more flexibility and I in long run I spend less time because don't need to reverse engineer or workaround limitations each comp lib has.
Great video. I thought you did a great job at balancing the landscape.
Is that excalidraw that you are using?
It sure is! One of my favorite products out there.
I've heard libraries like Mantine don't work well with SSR. Any thoughts on this?
they have an SSR package so it should work
We settled on Radix UI + Tailwind. Good stuff!
a great choice!
What are the advantages bro?
Thank you!
The thing about component libraries is that they come with a bit of learning curve. You need to look at their docs more often than you'd have to if you were using tailwind because you can far more easily guess classnames rather than component names and their props. At the end of the day it comes to preference but learning new things never hurts to find what sticks the best.
great take!
Hello, is your browser Safari? I'm wonder how you customize it and how to have sidebar?
No it’s Arc Browser
@@james-perkins Thanks!
I love mantine UI + tailwindcss😍
I love using mantine, but wanting to start using thw nextjs app directory. So been switching to tailwind, unless there is a component library that works with the nextjs app directory
tailwind + shadcdnUI has been my go to recently
@@james-perkins Thanks looks interesting!
I like chakra in general, I used it in one of the project. But lately it’s not compatible with in Next 13 inside app directory. 😢
To use Chakra UI in those components, you need to convert them into client-side component by adding a 'use client'; at the top of your file. Chakra UI only works in client-side components.
@@james-perkins That's where I got annoyed: for each component, you need a separate component with style management. There are a few additional problems, such as a problem with the Link component and, every now and again, the Hydration issue. I will approach the Chakra team to provide an example or documentation to help newbies avoid being hit.
The same for Mantine. They are not ready for server components.
Component libraries are almost impossible to customize.
I really prefer using ui libraries one of my favorites is PrimeReact but when your manager says don't use libraries make everything by yourself you do everything by yourself,especially when the project it's too big everything matters especially for perfmonace reasons
When your manager says “don’t use libraries” I’d question the manager.
The performance can be vastly improved and UX UI can be delivered quickly allowing for business logic etc to be built.
Trade offs don’t mean no, it means evaluation and analysis then decision making
Super insightful - I am a Tailwind fan, however, I don't like how much they charge for their pre-build component library. I have never heard of DaisyUI and will definitely check it out ;)
DaisyUI is super helpful in getting some of reusable components done.
Instead of "Stop using tailwind" how about "Think before using Tailwind" or "Components are more efficient than Tailwind" which is something I agree with.
I have been debating about creating my own component library, I initially building pages from scratch then came across Tailwind and it feels like I am cheating 😅😅
No click bate my brother, but keep the doing a good job!
He has a point. Imagine you have a dateline and you are worried about the ui when important parts are not finished.
Also try headless UI with tailwind.
Plus one to this. A great option
Using Radix UI with Tailwind. ❤ TailwindUI is cool too, but a bit lacking. However, I purchased it just to support the project.
I NEEDEED THIS VIDEO LOL. I WAS JUST THINKING ABOUT IT
Reading your thoughts right through the internet
@@james-perkins lol i was thinking about trying daisyUI. unfortunately i havent found many tutorials about people using it
I have a few on the channel.
@@james-perkins thx i will check them
I use Tailwind because customising component libraries is pain in the ass. I rather create the components myself.
no way Jose!
I use MUI (material ui) for work and personal projects. It's well documented and imo easy to use. I've tried tailwindcss and I see why people like. I think I comes down to use case and personal preference. Chakra UI and Mantine UI are great component libraries also but I don't think they have been out as long as MUI. Anyways great video - I dropped a like. 👍
Love this opinion. thanks for stopping by! thanks for watching hope you subscribe
@@james-perkins Thanks for the reply - yup I am subbed! 😎😎
How to separate css styling from the component, in the docs everything is on same file. Is there any way or it is what it is?
@@princeparaste5659 if we are talking about MUI, yes, you can separate your CSS styles from the component or you can override the components styles using their styled() utility. I know they make a lot of use of the sx prop in the MUI docs but that can be separated out. Check out the Customization > How to customize section in the MUI docs. Hope this helps!
@@princeparaste5659 The best way for me is creating a new theme with createTheme and ThemeProvider. You can literally create any style you wish, but it's somehow hard at the beginning, because you will have to target the default classes (for example, MuiButton-root is the class for the root button), but once you get the grasp of it, it will become super easy.
tailwind headless daisyui
Misleading thumbnail and title. Video is good though. Like it.
What about component libraries based on tailwind? Like daisyui
Did you watch the video?
If you're needing to use a library like Daisy to make Tailwind more manageable then JFC maybe Tailwind isn't a good solution.
“Moving faster” !== “More manageable” Tailwind is fairly easy to manage when you have reusable components, layouts etc.
Which is what DaisyUI does, makes reusable components that allows you to move quickly
I personally find Daisy UI to be cumbersome in production and is only 2 layers of abstraction from CSS ..which is why I've written an AI CSS solution call "Daisy Chain". It automates the process of abstraction and uses machine learning to create UI libraries.
It radically simplifies the process of centring a div by letting you modify the DOM in Rust.
Using UI libs is only a pick when we have to deliver product pretty quickly or theres no budget for custom ui and even tho the only viable pick is mantine atm, MUI and chakra are pain in the ass, chakra is survivable yet, but MUI has the worst DX you could ever experience and the only value is that it gives hella alot of variants of x component and thats cool for customizing ui of an app with only "copy and paste from docs". Otherwise TailwindUI+RadixUi+Tailwind for customizing the components i dont see any better pick I would never use UI lib like mui, its catastrophic experience, but client doesnt care what you will use and what matters is the final results, so from business/company perspective who have a team of devs picking ui can be a good pick, but for somebody who wanna work on a single longterm product custom components and ui is the only pick.
I also hate UI libs overall, but I love tailwind and thats why i wanna build my own tailwind based ui lib to use it for my projects since im more focused on delivering functionalities these days than ui and how does it looks like
Did you watch the video?
- I talk about DaisyUI
- I talk about Tailwind UI + Headless UI as an example.
- I never talk about MUI
- I talk about Mantine
- I explain why ChakraUI is actually flexible more than people know.
I feel like this is just your opinion piece and you didn't watch more of the video than the intro and saw a thumbnail
Daisy UI looks like Bootstrap with extra steps.
You persuade our designers and I buy you coffee for a month. 🙄
Well it worked for our designers so maybe 🤔
The problem is that you will use enough time to modify those components
Unlikely that you spend as much time modifying components in a lib as creating them all from scratch.
Exactly the point with component libraries.
We’ll I guess most of you guys, don’t have to deal with intricate designs. Designs that change completely the look and feel of a basic component. Designs that push design and user experience to the edge. In those cases, yes it’s only logical to have some libraries in your arsenal… but there are cases that the libraries won’t cut it.
There are libraries like radix, react-aria, headlessUI that offers you basic components and their functionality but they’re without styling. That way you get to author you’re styles with having to override a bunch of predefined styles.
did you watch the video?
I literally talk about some of those options in the video.
I dealt with intricate designs for over a decade and everything in this video still applies to the exact audience it targeted.
@@james-perkins I did, in which min you talk about headless libraries?
Sorry wrong video. I talk about Radix with tailwind in an stream I did which sparked this video
Either way this video is targeted for a specific group of oeople who spend more time messing around with tailwind then building the SaaS then end up abandoning it because it got to messy to quickly.
This isn't a video for people using complex design system although even those I bet could be handled with Chakra in 2023.
the most irritating thing i have ever found during my journey of Full Stack Developer is Tailwind CSS
My guess is your pages look like crap then or they look the same as everyone else's.