UI Components from Daisy UI
It all started for me when I was at work, editing some WordPress website for one client while maintaining a React Storybook repo of UI components for another client.
My boss saw me working hard and he wanted me to know there going to be a new client that needs 3 templates for his website - in a day.
But the kick was that the client didn’t have a website yet so our templates will provide him with a base for his new website, meaning we can pick any tech stack we want, as long as we can maintain it later on.
My boss was so excited about the new client and the new templates - he wanted the moon and the stars and I thought: I only have a day? I can’t even get through a WordPress installation and installing a custom theme that fast.
So that’s when I started to think outside the usual React and WordPress boxes and thought about a lean website I can edit myself faster than I can read the docs.
Enter UI Libraries
If you’re reading this - you’re probably know about UI Libraries, they’re a fast shortcut a lot of websites and web apps take to implement a range of ready-made components instead of reinventing the wheel each time.
The most famous UI Libraries are ShadCN, Radix UI and MUI. All are very professional and very well thought out… for React.
ShadCN plays nice with every framework, as long as it’s based on React.
The problems with React
You might think - what’s wrong with React? I get it - React is a standard and we’re all used to it by now. I also spend most of my days at work hunching over some React code (or TypeScript) and it’s not a bad way to live.
But React still have some drawbacks:
React is hard to learn - which means that a lot of the time when I’m working with clients that are developers or have their own developers (like in this templates task) they can’t help me with React.
React projects needs to be built, there is no folder I can just ZIP and send around to the client’s website (I know I can send the
buildfolder - but then even a small change will have to go through me).It will take more time than just copying and pasting some HTML elements, React has more of an ecosystem around it - which is great but also more time consuming.
Clean HTML and CSS will always be simpler since in React you still need to confront those, but also a few more things - that can all go terribly wrong.
Entering the “Clean” HTML and CSS UI Libraries
Here is a quick overview of the best ones I found, there’s 4 of them here and they all work a little different, in order to test all of them, I’ll show a CodePen of each showing its native Card Component.
I picked the Card Component because it’s a simple component a lot of websites use nowadays but it’s not too simple, like a Button - that we can hardly appreciate the differences between the libraries.
Daisy UI
Link to the library: https://daisyui.com
Daisy UI is a hybrid between a pure Tailwind utility library and a pure class-based library, which means this card component div has the class of card so the library knows how to style it in our layout.
However, it also has the Tailwind utility classes exposed, such as these: bg-base-100 w-96 shadow-sm so we can always add customization of our own from the Tailwind classes we know.
I added the m-4 to make the card component not bump into the edges, for example.
Requirements - adding to our <head> these:
A link to a Daisy UI CSS file
A script tag to load up Tailwind
Another link to a Daisy UI CSS file for theme (optional)
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />Hyper UI
Link to the library: https://www.hyperui.dev
Hyper UI is a collection of Tailwind CSS components, to use them we can just pick the component we want and copy-paste its code, every component can come in pure HTML, React or Vue form and they’re responsive out of the box.
If you already know how to use Tailwind - this is a great library, if not I recommend you learn by trying to write it yourself first, see their docs for more details (Link to Tailwind)
Requirements - adding to our <head> these:
A script tag to load up Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>Pines UI
Link to the library: https://devdojo.com/pines
Pines UI is also a Tailwind based components library, but the difference is it’s built to play nice with Alpine JS (Link to Alpine) and together they can be very powerful.
If you’re already using Alpine - this is the UI Library for you, if not don’t worry- You can still use it just like Hyper UI with copy-paste the different components and editing them using Tailwind classes.
Alpine JS is much simpler to learn than React or Vue so it can be a good idea to learn it down the line, even if you’re not into JavaScript frameworks,
Requirements - adding to our <head> these:
A script tag to load up Tailwind
A script tag to load up Alpine JS (optional)
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="//unpkg.com/alpinejs" defer></script>Shoelace
Link to the library: https://shoelace.style
Shoelace is very different, for starters it’s the only one on this list that doesn’t use Tailwind, it’s also the only one to use its own custom HTML tags.
The implementation of components is also a bit different since it requires to copy-paste not only the HTML code but also the CSS code, which they present inside the <style> tag when viewing a component.
I advise pasting the CSS code in another file, either your project style.css file or inside a different shoelace.css file, if you want to separate them.
The lack of Tailwind isn’t a problem, you can still customize anything you like with plain clean CSS. The components themselves are responsive, well-built and very pretty in my opinion.
The custom tags can also be an advantage to separate your Shoelace UI from the rest of your HTML, as Shoelace components will always be nested inside a custom sl-xxxx tag, yes - even a simple button will be a <sl-button> tag.
Requirements - adding to our <head> these:
A link tag to load Shoelace CSS theme
A script tag to load up Shoelace autoloader
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>In conclusion you can (and should) explore a wide range of UI Libraries when writing code - even if you write clean HTML, there’s no reason to reinvent the wheel with each new project.
If you’re the kind of person that doesn’t like React (or doesn’t want to learn it) maybe your next move is to learn how to work with Tailwind CSS to maximize your styling potential.
Even if you don’t want to learn Tailwind and don’t want to learn React, you can always just use Shoelace, it’s all clean code and it’s very simple to get started.
Thanks for Reading to the end. You now get a cookie 🍪