A beautiful Laravel starter kit with DaisyUI integration, providing a modern and responsive UI framework for your Laravel applications. Built with Tailwind CSS v4 and the latest DaisyUI.
- 🎨 DaisyUI components integration
- 🌓 Dark mode support with theme persistence
- 📱 Responsive design
- 🎯 CSS-first theme configuration
- 🚀 Easy to customize
- 📦 Simple installation
- 🔐 Authentication with Laravel Breeze
- ⚡ Tailwind CSS v4 integration
- 📱 Ready-to-use example pages and components
- PHP ^8.2
- Laravel ^12.0
- Node.js & NPM
- Create a new Laravel project:
laravel new my-project
cd my-project- Install the package via composer:
composer require sanjaya/laravel-daisyui-starter:dev-main- Run the installation command:
php artisan daisyui-starter:installThis will:
- Install Laravel Breeze (if not already installed)
- Publish the package assets and example pages
- Install required NPM packages
- Configure Vite with Tailwind CSS
- Set up the theme configuration
- Build the assets
- Start your development server:
php artisan serve- In a separate terminal, start the Vite development server:
npm run devThe package comes with pre-built example pages showcasing various DaisyUI components:
The base layout (resources/views/layouts/app.blade.php) includes:
- Responsive navigation bar
- Theme switcher (light/dark mode)
- User dropdown menu
- Automatic theme persistence using localStorage
To use the layout in your views:
<x-app-layout>
<!-- Your content here -->
</x-app-layout>The dashboard example (resources/views/dashboard.blade.php) demonstrates:
- Stats Cards:
<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>- Alert Components:
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<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>New software update available.</span>
</div>- Form Elements:
<div class="form-control w-full">
<label class="label">
<span class="label-text">What is your name?</span>
</label>
<input type="text" placeholder="Type here" class="input input-bordered w-full" />
</div>- Data Tables:
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Developer</td>
<td><div class="badge badge-success">Active</div></td>
</tr>
</tbody>
</table>
</div>- Buttons:
<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>- Cards:
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Content</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Action</button>
</div>
</div>
</div>- Badges:
<div class="badge">Default</div>
<div class="badge badge-primary">Primary</div>
<div class="badge badge-secondary">Secondary</div>
<div class="badge badge-accent">Accent</div>- Avatars:
<div class="avatar">
<div class="w-24 rounded-full">
<img src="user-avatar.jpg" />
</div>
</div>- Dropdowns:
<div class="dropdown">
<label tabindex="0" class="btn m-1">Click</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>Themes are now configured directly in your CSS using CSS variables, following Tailwind CSS v4's CSS-first approach. The configuration is located in resources/css/app.css:
@layer theme {
:root {
--theme: "light";
--color-primary: oklch(0.6569 0.196 275.75);
--color-secondary: oklch(0.7176 0.158 342.55);
--color-accent: oklch(0.7059 0.169 183.61);
/* ... other color variables ... */
}
[data-theme="dark"] {
--theme: "dark";
--color-base-100: oklch(0.2 0 0);
}
}To customize your theme colors, modify the CSS variables in resources/css/app.css. Available color variables:
--color-primary: Main brand color--color-secondary: Secondary brand color--color-accent: Accent color--color-neutral: Neutral color--color-base-100: Background color--color-info: Information color--color-success: Success color--color-warning: Warning color--color-error: Error color
To switch themes in your Blade templates:
<html data-theme="light">
<!-- For light theme -->
</html>
<!-- OR -->
<html data-theme="dark">
<!-- For dark theme -->
</html>For dynamic theme switching:
<html data-theme="{{ $theme }}">
<!-- Your content -->
</html>After installation, you can use DaisyUI components in your views:
<button class="btn btn-primary">Primary Button</button>
<div class="card">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Card content</p>
</div>
</div>The package integrates with Laravel Breeze for authentication. All auth views are styled with DaisyUI components. Available routes:
- Login:
/login - Register:
/register - Password Reset:
/forgot-password - Profile:
/profile
- If you get a stability error when installing, use:
composer require sanjaya/laravel-daisyui-starter:dev-main- If assets are not showing up correctly:
- Make sure you've published all assets
- Clear your Laravel cache:
php artisan cache:clear - Rebuild your npm assets:
npm run build
- If themes are not applying:
- Ensure the
data-themeattribute is properly set on your HTML elements - Check that your CSS variables are correctly defined in
resources/css/app.css - Make sure Vite is properly building your assets
Please see CONTRIBUTING.md for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.