When it comes to User Interface (UI) development, aesthetics and functionality need to go hand in hand to create an engaging and efficient experience for users. This is where DaisyUI comes in, a stylish and practical plugin for the popular CSS framework, Tailwind CSS. In today's post, let's dive into the world of DaisyUI and explore how incorporating its components into the 'Storefront' project can elevate our platform to new heights.

What is DaisyUI?

DaisyUI is a component library that functions as a plugin for TailwindCSS, a highly customizable and low-level CSS framework. What DaisyUI does is bring a rich set of pre-built components that can be easily integrated and customized within a project using TailwindCSS. This means you can enjoy all the customization benefits Tailwind offers, with the speed and simplicity of a more traditional UI kit.

Here's a quick example of a simple button coded without and with DaisyUI:

Without DaisyUI (Using only Tailwind CSS)

<!-- Button without DaisyUI -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click here
</button>

In this example with pure Tailwind CSS, you need to specify all the classes for button styling, from the background color (bg-blue-500 and hover:bg-blue-700 for the hover state) to the rounding of the corners (rounded).

With DaisyUI

<!-- Botão com DaisyUI -->
<button class="btn btn-primary">
  Click here
</button>

With DaisyUI, we simplify the markup using the btn class for basic button styling and btn-primary to apply the primary style predefined by the DaisyUI theme. The library takes care of all button interaction states, such as hover and focus, without the need to add additional classes.

When you install DaisyUI, it provides a series of pre-defined classes that already come with a range of style settings. This allows for a substantial reduction in the code effort and increases readability at the same time.

How does DaisyUI fit into the Storefront?

It is common knowledge that our sites already have DaisyUI in them. The difference now is that with the 'daisy' components folder, you can find the UI components offered by the library adapted to become components with props in our editor. These 'deco' components are advanced versions of DaisyUI components that can now be used as Preact components (a lightweight alternative to React), offering the flexibility to accept 'props' - a powerful Preact feature for passing data and configuring the component. This allows them to adapt or change according to the needs of the context in which they are used, which is especially useful for creating dynamic 'sections' in an application.

For example, if we have a Toast component, instead of using them in different ways in different contexts, you can use the Toast.tsx component that already anticipates some behavioral changes.

<Toast message=”Hello, i am a Toast” verticalPosition=”toast-top” horizontalPosition=”toast-start” />

This simple configuration will correctly set up your Toast in a position at the top and left.