sanjaya/laravel-daisyui-starter

A Laravel starter kit with DaisyUI integration

v0.4.0-beta 2025-05-31 23:58 UTC

Requires

• php: ^8.2
• laravel/breeze: ^2.0
• laravel/framework: ^12.0

Requires (Dev)

• orchestra/testbench: ^9.0
• phpunit/phpunit: ^10.0

MIT

• Sanjaya

README

Laravel DaisyUI Starter Kit

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.

Features

• 🎨 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

Requirements

• PHP ^8.2
• Laravel ^12.0
• Node.js & NPM

Installation

1. Create a new Laravel project:

laravel new my-project
cd my-project

1. Install the package via composer:

composer require sanjaya/laravel-daisyui-starter:dev-main

1. Run the installation command:

php artisan daisyui-starter:install

This 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

1. Start your development server:

php artisan serve

1. In a separate terminal, start the Vite development server:

npm run dev

Example Pages and Components

The package comes with pre-built example pages showcasing various DaisyUI components:

Layout Structure

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>

Dashboard Example

The dashboard example (resources/views/dashboard.blade.php) demonstrates:

1. 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>

1. 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>

1. 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>

1. 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>

Common Components

1. 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>

1. 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>

1. 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>

1. Avatars:

<div class="avatar">
    <div class="w-24 rounded-full">
        <img src="user-avatar.jpg" />
    </div>
</div>

1. 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>

Theme Configuration

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);
    }
}

Customizing Colors

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

Switching Themes

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>

Usage

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>

Authentication

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

Troubleshooting

Common Issues

1. If you get a stability error when installing, use:

composer require sanjaya/laravel-daisyui-starter:dev-main

1. 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

1. If themes are not applying:

• Ensure the data-theme attribute 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

Contributing

Please see CONTRIBUTING.md for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

License

The MIT License (MIT). Please see License File for more information.