Introduction
#Develop your site with a component library
Greatly shorten the code for your front-end pages and enjoy the style of your favorite TailwindCSS-based component library, without the hassle.
This is the library of your next Laravel website!
#Enjoy support of your favorite Tailwind plugin
Create components from DaisyUI or FlyonUI with minimal hassle. It takes hardly 2 minutes for the theme from your favorite plugin to be applied throughout your website.
#Supercharge your site with Livewire
The components are fully compatible with Livewire, bringing life and dynamism to your website.
#No extensive knowledge required
Do you know? Do you need to know in the first place?
We believe you don't! Just type a component's name and your website will generate the full DOM structure that makes it appear on screen correctly.
#Minimal code for maximum results
Let's see how much code is required to render the below information pane, and compare it to the raw HTML defined by DaisyUI and FlyonUI.
The provided Blade components make all the heavy-lifting for you. Even for something as simple as an alert, the code is shorter and more comprehensible.
1<x-alert type="info" description="I am an information pane."/>
I am an information pane.
1<div role="alert" class="alert alert-info flex gap-4">
2 <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
3 <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
4 </svg>
5 <span>I am an information pane.</span>
6</div>
I am an information pane.
1<div role="alert" class="alert alert-info flex gap-4">
2 <span class="icon-[heroicons--information-circle] shrink-0 size-6"></span>
3 <p>I am an information pane.</p>
4</div>
I am an information pane.
And the difference only increases when more components are added, such as this simple login form.
1<div class="w-108 bg-base-300 rounded-lg p-4 w-100 flex flex-col gap-2">
2 <x-input title="Login" placeholder="[email protected]" icon="heroicon-o-user" required/>
3 <x-password title="Password" placeholder="●●●●●●●●" icon="heroicon-o-lock-closed" eye required/>
4 <x-checkbox label="Remember me"/>
5 <div class="flex justify-between">
6 <x-button type="button" tabindex="-1" variant="ghost" size="md" label="Forgot your password?"/>
7 <x-button class="self-end" color="accent" label="Login" icon="heroicon-o-key"/>
8 </div>
9</div>
1<div class="w-108 bg-base-300 rounded-lg p-4 w-100 flex flex-col gap-2">
2 <header class="font-base text-lg -mb-2">Login</header>
3 <label class="input w-full gap-2 items-center">
4 <div class="flex h-lh">
5 <svg class="h-lh w-lh" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
6 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path>
7 </svg>
8 </div>
9 <input type="text" placeholder="[email protected]" class="grow"/>
10 </label>
11 <header class="font-base text-lg -mb-2">Password</header>
12 <label class="input w-full gap-2 items-center">
13 <div class="flex h-lh">
14 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
15 <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"></path>
16 </svg>
17 </div>
18 <input type="password" placeholder="●●●●●●●●" class="grow"/>
19 <button class="btn btn-ghost btn-text btn-sm p-1 text-base-content btn-circle order-last" tabindex="-1"
20 onclick="var eyeButton = this.nextElementSibling;
21 this.classList.add('hidden');
22 eyeButton.classList.remove('hidden');
23 this.previousElementSibling.setAttribute('type', 'text');
24 if (document.activeElement == this)
25 eyeButton.focus({ focusVisible: true });">
26 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
27 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"></path>
28 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
29 </svg>
30 </button>
31 <button class="btn btn-ghost btn-text btn-sm p-1 text-base-content btn-circle order-last hidden" tabindex="-1"
32 onclick="var eyeButton = this.previousElementSibling;
33 this.classList.add('hidden');
34 eyeButton.classList.remove('hidden');
35 eyeButton.previousElementSibling.setAttribute('type', 'password');
36 if (document.activeElement == this)
37 eyeButton.focus({ focusVisible: true });">
38 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
39 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"></path>
40 </svg>
41 </button>
42 </label>
43 <label class="label flex items-center gap-1">
44 <input type="checkbox" class="checkbox" />
45 Remember me
46 </label>
47 <div class="flex justify-between">
48 <button class="btn btn-ghost">Forgot your password?</button>
49 <button class="btn btn-accent self-end">
50 <span class="h-lh aspect-square">
51 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
52 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"></path>
53 </svg>
54 </span>
55 Login
56 </button>
57 </div>
58</div>
1<div class="w-108 bg-base-300 rounded-lg p-4 w-100 flex flex-col gap-2">
2 <label class="label-text text-lg -mb-2 p-0" for="loginInput">Login</label>
3 <div class="input w-full gap-2">
4 <span class="icon-[heroicons--user] text-base-content/80 my-auto size-6 shrink-0"></span>
5 <input type="text" placeholder="[email protected]"/>
6 </div>
7 <label class="label-text text-lg -mb-2 p-0" for="passwordInput">Password</label>
8 <div class="input w-full">
9 <span class="icon-[heroicons--lock-closed] text-base-content/80 my-auto me-3 size-6 shrink-0"></span>
10 <input type="password" placeholder="●●●●●●●●"/>
11 <button class="btn btn-ghost btn-text btn-sm p-1 text-base-content btn-circle order-last self-center" tabindex="-1"
12 onclick="var eyeButton = this.nextElementSibling;
13 this.classList.add('hidden');
14 eyeButton.classList.remove('hidden');
15 this.previousElementSibling.setAttribute('type', 'text');
16 if (document.activeElement == this)
17 eyeButton.focus({ focusVisible: true });">
18 <span class="icon-[heroicons--eye] text-base-content/80 my-auto size-6 shrink-0"></span>
19 </button>
20 <button class="btn btn-ghost btn-text btn-sm p-1 text-base-content btn-circle order-last self-center hidden" tabindex="-1"
21 onclick="var eyeButton = this.previousElementSibling;
22 this.classList.add('hidden');
23 eyeButton.classList.remove('hidden');
24 eyeButton.previousElementSibling.setAttribute('type', 'password');
25 if (document.activeElement == this)
26 eyeButton.focus({ focusVisible: true });">
27 <span class="icon-[heroicons--eye-slash] text-base-content/80 my-auto size-6 shrink-0"></span>
28 </button>
29 </div>
30 <div class="flex items-center gap-1">
31 <input type="checkbox" class="checkbox"/>
32 <label class="label-text text-base">Remember me</label>
33 </div>
34 <div class="flex justify-between">
35 <button class="btn btn-text">Forgot your password?</button>
36 <button class="btn btn-accent self-end">
37 <span class="icon-[heroicons--key] my-auto size-6 shrink-0"></span>
38 Login
39 </button>
40 </div>
41</div>
1<div class="w-108 rounded-lg bg-neutral-200 text-zinc-900">
2 <div class="flex flex-col gap-3 p-4">
3 <div class="flex w-full flex-col">
4 <header class="font-base text-lg">Login</header>
5 <label class="flex h-10 w-full cursor-text items-center gap-2 rounded-sm border-1 border-zinc-300 bg-white px-3 whitespace-nowrap">
6 <div class="flex h-lh">
7 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
8 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"></path>
9 </svg>
10 </div>
11
12 <input type="text" placeholder="[email protected]" required="required" class="grow basis-1/4 focus:outline-none" />
13 </label>
14 </div>
15
16 <div class="flex w-full flex-col">
17 <header class="font-base text-lg">Password</header>
18 <label class="flex h-10 w-full cursor-text items-center gap-2 rounded-sm border-1 border-zinc-300 bg-white px-3 whitespace-nowrap">
19 <div class="flex h-lh">
20 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
21 <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"></path>
22 </svg>
23 </div>
24
25 <input type="password" placeholder="●●●●●●●●" required="required" class="grow basis-1/4 focus:outline-none" />
26 <button
27 class="order-last size-8 cursor-pointer rounded-full p-1 outline-none hover:bg-gray-200"
28 type="button"
29 tabindex="-1"
30 onclick="var eyeButton = this.nextElementSibling;
31 this.classList.add('hidden');
32 eyeButton.classList.remove('hidden');
33 this.previousElementSibling.setAttribute('type', 'text');
34 if (document.activeElement == this)
35 eyeButton.focus({ focusVisible: true });"
36 >
37 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
38 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"></path>
39 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
40 </svg>
41 </button>
42 <button
43 class="order-last hidden size-8 cursor-pointer rounded-full p-1 outline-none hover:bg-gray-200"
44 type="button"
45 tabindex="-1"
46 onclick="var eyeButton = this.previousElementSibling;
47 this.classList.add('hidden');
48 eyeButton.classList.remove('hidden');
49 eyeButton.previousElementSibling.setAttribute('type', 'password');
50 if (document.activeElement == this)
51 eyeButton.focus({ focusVisible: true });"
52 >
53 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
54 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"></path>
55 </svg>
56 </button>
57 </label>
58 </div>
59
60 <label class="flex cursor-pointer items-center gap-1.5 text-sm text-zinc-500">
61 <div class="relative inline-block h-5">
62 <input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:outline-none checked:focus-visible:ring-zinc-900" />
63 <span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
64 </div>
65 Submit to newsletter
66 </label>
67 <label class="flex cursor-pointer items-center gap-1.5 text-sm text-zinc-500">
68 <div class="relative inline-block h-5">
69 <input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:outline-none checked:focus-visible:ring-zinc-900" />
70 <span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
71 </div>
72 Accept terms of use
73 </label>
74 <div class="flex justify-between">
75 <button class="cursor-pointer rounded-sm bg-transparent px-4 hover:bg-gray-200" type="button" tabindex="-1">
76 <span class="loading loading-spinner not-in-data-loading:hidden">spinner</span>
77
78 Forgot your password?
79 </button>
80 <button class="inline-flex cursor-pointer items-center gap-1.5 self-end rounded-sm bg-emerald-400 px-4 py-2.5 text-center text-sm font-semibold text-emerald-900 transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:outline-none active:translate-y-[1px] active:shadow-none">
81 <span class="loading loading-spinner not-in-data-loading:hidden">spinner</span>
82 <span class="flex w-6 items-center justify-center in-data-loading:hidden">
83 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
84 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"></path>
85 </svg>
86 </span>
87
88 Login
89 </button>
90 </div>
91 </div>
92</div>
Because Blade components need not be reusable outside your Laravel website, using them is ALWAYS less verbose than DaisyUI/FlyonUI components.