09 - Component Libraries: Tailwind UI, Flowbite, DaisyUI

It is easy to work and style components using Tailwind. However, manually assigning classes is sometimes not the most convenient way when you want to get started quickly.

Tailwind has libraries with many prebuilt components, such as buttons, tables, and sections.

However, not all of them are entirely free, and some libraries have paid versions along with the free ones.

Tailwind UI

TailwindUI is a component library by the creators of TailwindCSS. If you have Tailwind installed, you can grab snippets straight from the library and immediately use them.

Preview

Let's see that in action, grab Input component and put it on a new demo page:

resources/views/tailwindui.blade.php:

<html class="h-full ">
    <head>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
 
    <body class="h-full bg-gray-100">
        <div class="max-w-md mx-auto mt-4">
            <label for="price" class="block text-sm font-medium leading-6 text-gray-900">Price</label>
            <div class="relative mt-2 rounded-md shadow-sm">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                    <span class="text-gray-500 sm:text-sm">$</span>
                </div>
                <input type="text" name="price" id="price" class="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00">
                <div class="absolute inset-y-0 right-0 flex items-center">
                    <label for="currency" class="sr-only">Currency</label>
                    <select id="currency" name="currency" class="h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">
                        <option>USD</option>
                        <option>CAD</option>
                        <option>EUR</option>
                    </select>
                </div>
            </div>
        </div>
    </body>
</html>

Define a route and see the result by visiting the /tailwindui URL.

routes/web.php:

Route::view('/tailwindui', 'tailwindui');

TailwindUI Demo

Pros:

No complex setup
A lot of components that will cover most of the application's needs.
Has ready-to-go components with frameworks like React and Vue

Cons:

Very few free components to use.

Flowbite

Flowbite is one of the most popular open-source libraries of Tailwind components. Some components are interactive, and their functionality is already implemented with JS and included in a bundle.

Installation

Make sure that you have Tailwind CSS installed.

Install Flowbite as a dependency using NPM by running the following command:

npm install flowbite --save-dev

Import Flowbite as a plugin inside the app.css file and add source path to flowbite to apply the classes from the interactive elements:

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
@source "./node_modules/flowbite/**/*.js"; /* [tl! ++] */
 
@plugin 'flowbite/plugin'; /* [tl! ++] */

Import flowbite in your main app.js file that powers the interactive elements.

resources/js/app.js:

import './bootstrap';
import 'flowbite';

Preview

Let's try out some components. In this example, we took Card and Button components.

Create a new view:

resources/views/flowbite.blade.php:

<html>
    <head>
        <title>Flowbite</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
 
    <body class="bg-gray-50 m-6">
        <a href="#" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
            <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
        </a>
 
        <button type="button" class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 mt-4">Green</button>
    </body>
</html>

routes/web.php:

Route::view('/flowbite', 'flowbite');

When you visit the /flowbite URL, you should see the card and the button we created.

Flowbite Demo

Pros:

Has over 600+ UI components
Free basic components
Interactive components
Can be bundled or included via CDN
Supports different stacks like Vue, React, Angular, Svelte and more

Cons:

UI Templates are paid as Flowbite Pro version
Requires additional configuration
Interactive components require additional Flowbite JS

DaisyUI

DaisyUI is another popular Tailwind component library. The main difference between this library and previous ones is that it adds semantic class names on top of Tailwind. DaisyUI has more of a Bootstrap feeling, not sacrificing the flexibility of Tailwind.

Installation

Install daisyUI via NPM command:

npm i -D daisyui@beta

At the time of writing, daisyUI support for TailwindCSS v4 is in beta.

Then add the daisyUI plugin:

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@plugin "daisyui"; /* [tl! ++] */

Preview

Add the Alert and Stat component to a new page:

resources/views/daisyui.blade.php:

<html>
    <head>
        <title>DaisyUI</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
 
    <body>
        <div class="max-w-md mx-auto mt-4">
            <div role="alert" class="alert">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>12 unread messages. Tap to see.</span>
            </div>
            <div class="stats shadow">
                <div class="stat">
                    <div class="stat-title">Total Page Views</div>
                    <div class="stat-value">89,400</div>
                    <div class="stat-desc">21% more than last month</div>
                </div>
            </div>
        </div>
    </body>
</html>

routes/web.php:

Route::view('/daisyui', 'daisyui');

To see the result, visit the /daisyui URL:

daisyUI Demo

We immediately notice that HTML using semantic classes has much less code.

The alert class styles the element as an alert. Tailwind utility classes are still available. For instance, use the shadow-lg class to add a shadow on the alert element.

<div role="alert" class="alert shadow-lg">

To learn more about component classes, visit the documentation.

Pros:

Adds semantic class names
Has themes
Easy installation
Smaller file sizes
Has HTML and JSX options

Cons:

Paid full-page templates
It might take a while to learn all the semantic classes

Eugene van der Merwe

1 year ago

Great course! Thanks so much, this was a wonderful overview. As back-end I get the basics of Tailwind CSS right but when it comes to things like Flexbox and negative insets and so on I really struggle. Ps. have you seen this cool tool by Marcel? https://knightsoftheflexboxtable.com/

👍 4

Povilas Korop

Wow, haven't seen that cool game :) Well yeah, flexbox is pretty hard, a lot of practice and experiments needed to get it right, unfortunately no quick shortcut here.

Dirk Helbert

A good course to refresh your knowledge of TailwindCSS. Thank you!

Emmanuel71

All the useful Tailwind info for Laravel nicely presented. Wish I had this tutorial when starting with Tailwind, would have saved me quite some time. Also very usable for quick reference. Thanks for this!

David Lun

thanks ;-)

Solomon Iroegbu

Great course. I now have a grip of where to start.

Gavin Kimpson

BladewindUI is another good option

👍 3

Tailwind CSS v4 for Laravel Developers

Component Libraries: Tailwind UI, Flowbite, DaisyUI

Tailwind UI

Preview

Flowbite

Installation

Preview

DaisyUI

Installation

Preview

Start with Tailwind

Tailwind Configuration and Customization Options

Your Own Custom Classes

Laravel Helpers and Blade Components

Deploy Tailwind to Production Server

Tailwind Classes: Size, Spacing, Colors, Fonts, Borders

Practical Application of Tailwind CSS Utility Classes

Layout - Media Breakpoints and Customization

Component Libraries: Tailwind UI, Flowbite, DaisyUI