I Found the Perfect Component Library
HTML-код
- Опубликовано: 20 май 2023
- A quick look at Daisy UI - a UI library built on top of Tailwind CSS.
💬 Topics:
- Pros and cons of Tailwind CSS;
- Styling modern web apps;
- Atomic CSS and utility classes;
- Best component libraries;
- Working with Daisy UI.
I've used daisy-ui for about a year both professionally and in hobby projects.
I've also worked quite a bit with component libraries, and the moment I want to do something custom they tend to fight back.
DaisyUI as an abstraction over tailwind is the way to go for my development mindset.
Every element has its default styling removed, and I have a blank slate to work with.
That's right , I tried to use it like mui but Daisy ui doesn't bring dynamic components(modal,dropdown) easily
DaisyUI is awesome. They're also working on a v3, excited to try it out!
I personally prefer tailwind with preline and write the component from scratch as i needed or tailwind with library like react aria and build component as i needed if i want animation just install framer motion or motion one and now you have more control over the ui
I like using shadcn/ui it provides useful components with the power of radix ui and tailwind to provide a reasonably styled powerful ui components.
It is indeed really cool, but I think it to slow to use. I don't like the CLI installation process for every component you need
I've used tailwind in production and they were a few drawback to keep in mind before jumping on the solution :
- If your app need a lot of computed CSS don't go for tailwind, highly limiting if you want to follow the best practices recommended by the doc
- If you need really complex CSS, tailwind wont support it and you will end up mixing raw CSS with tailwind syntax
- If you are using another component library don't bother using tailwind. You will end up mixing up css and tailwind as they often are not really compaptible. ( Which is what daysyUI is supposed to fix)
Overall i think tailwind is great for SSR without component library. Would use for Proof of Concept but not for a fully scaling and maintainable application
Thank you for your detailed answer!
Eh tailwind works for me
Gonna try it just right now in my tailwind project
Good luck!
Third.
More excellent content, I'm totally wedded to Tailwind for any side project - this looks like something really useful for quickly implementing components that can be really annoying to do manually (I'm looking at you carousel!)
Thank you for the feedback!
Haha I found the carousel useful as well! I lost so many hours in the past with custom implementations or weird 3rd party libraries on this... 🤦♂️
Looks nice, but is nowhere near replacing antd or mui. This looks more like a replacement for bootstrap or bulma. The benefit of antd and mui is their tight integration with react which makes actions like displaying notification popups, modals, etc... extremely easy. Not to mention that they come bundled with their own icon libraries
I agree. But I find a lot of value in being framework agnostic. I can live with some of the downsides if I can easily use Daisy with Solid or Svelte or whatever other new library that doesn't have a good component library built for it yet.
Agreed. There is still a lot left to be implemented
@@awesome-coding will you cover how to use daisy with the latest material design, especially the dynamic color feature?
@@AndiWidjaja Interesting suggestion! I'll look into it - thank you!
Long term DaisyUI user here, I LOVE IT
Fellow Twitter follower here! Nice!
Awesome!
Would be great to find similar UI lib for UnoCSS
You are right! Thanks for the suggestion!
is there any impact on page speed?
I just like to use headless-ui or radix-ui for creating my own components, its super customizable and fully assessible. I wrap all my logic with CVA to make it super clean and flexible to use. I don't want to use any animation from the component library itself when im starting from scratch. Daisy UI is good when you want to get something out done quick.
May I ask what CVA is?
@@Sandeep-zu7gd Class Variance Authority
@@Sandeep-zu7gdIt stands for Class Variance Authority. With the inclusion of CVA, a user-friendly interface is at your disposal, simplifying the definition of variants.
These variants enable the conditional application of class sets, while also offering the means to express default variations.
Thanks for bringing this to my attention, great video. By the way, what is that IDE/code editor you're using?
Thank you for your feedback!
IntelliJ Idea - the new UI they just introduced (www.jetbrains.com/help/idea/new-ui.html)
@Awesome Thanks 😃
As a new dev, I was intimidated by IntelliJ because of its confusing UI, but this new one looks very clean and welcoming. I'll give it another shot!
@@ProLessSkill Sure thing! IntelliJ is by far the best IDE I ever used. Its main issues is the steep pricing. Other than that, it does extremely well with a lot of programming languages and frameworks.
I like daisyUI a lot for projects, the only problem is accessibility.
Please elaborate on what you mean by "accessibility"
@@Septumsempra8818 If you use a screen reader or other accessibility tools, you might not be able to interact as expected with DaisyUI components because its interactivity is entirely CSS. For example, you cannot press ESC to close a DaisyUI modal like you might expect
because it just html and css ( implemented with tailwind) only. no js to make it more accessible
maybe you can combine it with radix ui or other headless ui
@@AdlerWeber hmmm... You raise am important point to consider
what editor and font are you using in this tutorial? I really like the styling choice you went for.
Hey! This is IntelliJ IDEA
THANK YOU!
I Love Mantine and Chakra UI 😍
These are React focused though, right?
Never heard of it..interesting
Very good video! Some classes look similar to Bootstrap, I guess that will make for a shorter learning curve for a Bootstrapper like me?
Yep - Some of the class names are "established" in multiple frameworks these days.
Skeleton UI, cheers
For me, Mantine UI is by the best. I haven't heard of Daisy thoough.
But that's only for React, correct?
what editor are u using?
IntelliJ Idea - the new UI.
Why are you using curly braces around your attribute strings?
My IDE was autocompleting those for a while like that, and then I just got used to it.
Sorry if it is distracting 😅
i like it, but when u make side projects u dont want to reinvent components so you need JS.. plain CSS doesnt help you much with speed
what about Flowbite or Catalyst UI?
Didn't get the chance to play around with Flowbite / Catalyst are they any good?
@@awesome-coding seems they still need a lot of work Flowbite react is version 0.4 and Catalyst also pretty new...
just subscribed
Thank you!
Me too!
Very interesting but instill love my chakraUi
I didn't hear anything after the guy typed class instead of className, I was just waiting for him to fix it to start paying attention, then realized it wasn't even React
This here is the main reason to switch to Solid!
Cool but daisyUI is kinda old (2021) have you heard of shadcn/ui ?
Oh wait.. there are more of them?! I miss the simpler days of everyone using Bootstrap 😅
We live in the good world where a 2021 css framework is now considered as old
Oh, I didn't mean old as in deprecated, but old as in everyone already knows it😅
@@ricko13 Haha no worries - I got it but was just messing around.
1:33 There are several files "iNtImIdAtInG"
Just like the primegen put it tailwind let's you revisit your site 6 weeks later and hit the ground running , also that context switching is worse than long html elements, I've also been sleeping on daisy UI given how poorly the other component libraries play with tailwind
ruclips.net/video/ej7KaY4KpDI/видео.html
I chose skeleton over DaisyUI cause DaisyUI is missing a few functionalities.
Thank you! This was a very informative video!
The only bad thing about this UI Lib is its buttons, THEY ARE HUGE, but everything else is ok
I think the "ugliness" factor of Tailwind can be removed when using with css modules. Simply assign the className={styles.whatever} ...then in the css sheet:
.whatever{
@apply w-4 h-8 etc...;
}
You may as well use CSS at that point
display: flex;
flex-direction: columns;
align-items: centered;
vs.
@apply flex flex-col items-centered;
No. Main reason for using tailwind is, it comes with a build in design system.
Dont worry it will all make sense. Hah, famous last word 😂
😂 spoiler alert, it never does in frontend dev.
Are you the TwoMinutePapers guy? I swear your voice is exactly the same
Haha I wish I was... that guy is really smart :D
Why are you using curly braces for every property?
Good question. I was using IntelliJ Idea for this project, and their default behaviour in TSX projects is to pre-fill JSX attributes with ={""} by default.
Second
✌️
First
☝️
Just use bootstrap. Same results one library.
hard disagree IMO, i find that once you've seen a bootstrap site you've basically seen them all
tailwindui is better
it's not free
I hate Tailwind.
why?
i actively avoid anything to do with tailwind. classname wrapper that brings nothing new.
Thanks for your response! Curious to know why do you avoid Tailwind?