README

A complete DaisyUI component library for Yii2, covering all 37+ DaisyUI components as PHP widgets — with full ActiveForm, ActiveField, GridView, and theme switching support.

No JavaScript build step required. Uses Tailwind CSS and DaisyUI via CDN by default.

Requirements

PHP >= 8.0
Yii2 >= 2.0

Installation

composer require iguazoft/yii2-daisyui

The extension auto-registers via Composer's extra.bootstrap — no manual configuration needed.

Configuration (optional)

// config/web.php
'params' => [
    'daisyui' => [
        'theme'  => 'light',   // default data-theme applied on every page
        'useCdn' => true,      // set false to use a local Tailwind/DaisyUI build
    ],
],

Using a local build (production)

// config/web.php
'params' => [
    'daisyui' => ['useCdn' => false],
],

public $css = ['css/app.css'];  // built with Tailwind + DaisyUI

Quick Start

use iguazoft\daisyui\widgets\Alert;
use iguazoft\daisyui\widgets\Button;
use iguazoft\daisyui\widgets\Card;
use iguazoft\daisyui\form\ActiveForm;

// Button
echo Button::widget(['label' => 'Save', 'variant' => 'btn-primary']);

// Alert
echo Alert::widget([
    'type'        => 'alert-success',
    'title'       => 'Done!',
    'body'        => 'Record saved successfully.',
    'dismissible' => true,
]);

// Card
echo Card::widget([
    'title'   => 'My Card',
    'body'    => 'Some content here.',
    'actions' => Button::widget(['label' => 'Read more', 'variant' => 'btn-primary']),
]);

// Form
$form = ActiveForm::begin(['id' => 'my-form']);
echo $form->field($model, 'name')->textInput(['placeholder' => 'Full name']);
echo $form->field($model, 'email')->textInput(['placeholder' => 'you@example.com']);
echo $form->field($model, 'role')->dropdownList(['admin' => 'Admin', 'user' => 'User']);
echo $form->field($model, 'active')->toggle();
ActiveForm::end();

Component Reference

Actions

Button

use iguazoft\daisyui\widgets\Button;

echo Button::widget([
    'label'   => 'Primary',
    'variant' => 'btn-primary',   // btn-secondary | btn-accent | btn-ghost | btn-link | btn-error | ...
    'size'    => 'btn-sm',        // btn-xs | btn-sm | btn-md | btn-lg
    'outline' => true,
    'loading' => false,
    'wide'    => false,
    'block'   => false,
    'url'     => '/some/path',    // renders <a> instead of <button>
    'options' => ['type' => 'submit'],
]);

Swap

use iguazoft\daisyui\widgets\Swap;

echo Swap::widget([
    'on'     => '<svg ...>moon</svg>',
    'off'    => '<svg ...>sun</svg>',
    'rotate' => true,
]);

Dropdown

use iguazoft\daisyui\widgets\Dropdown;

echo Dropdown::widget([
    'label'    => 'Options',
    'position' => 'dropdown-end',
    'items'    => [
        ['label' => 'Profile',  'url' => '/profile'],
        ['label' => 'Settings', 'url' => '/settings'],
        '-',
        ['label' => 'Logout',   'url' => '/logout'],
    ],
]);

Modal

use iguazoft\daisyui\widgets\Modal;
use yii\helpers\Html;

// Trigger
echo Html::button('Open', ['onclick' => "document.getElementById('my-modal').showModal()", 'class' => 'btn']);

// Modal definition
echo Modal::widget([
    'options' => ['id' => 'my-modal'],
    'title'   => 'Confirm',
    'body'    => 'Are you sure?',
    'actions' => Html::button('Cancel', ['class' => 'btn', 'onclick' => "document.getElementById('my-modal').close()"])
              . Html::button('Confirm', ['class' => 'btn btn-primary']),
]);

// Or with begin/end for custom content:
Modal::begin(['options' => ['id' => 'custom-modal'], 'title' => 'Edit User']);
echo '<p>Custom content inside the modal.</p>';
Modal::end();

Data Display

Alert

use iguazoft\daisyui\widgets\Alert;

echo Alert::widget([
    'type'        => 'alert-success',  // alert-info | alert-warning | alert-error
    'title'       => 'Success!',       // optional bold title
    'body'        => 'Operation completed.',
    'dismissible' => true,
    'icon'        => '',               // custom SVG, auto-icon used when empty
]);

Badge

use iguazoft\daisyui\widgets\Badge;

echo Badge::widget([
    'label'   => 'New',
    'variant' => 'badge-primary',   // badge-secondary | badge-success | badge-error | ...
    'size'    => 'badge-sm',        // badge-xs | badge-sm | badge-md | badge-lg
    'outline' => true,
]);

Card

use iguazoft\daisyui\widgets\Card;

echo Card::widget([
    'title'   => 'Card Title',
    'image'   => '/img/photo.jpg',
    'body'    => 'Card body content.',
    'actions' => Button::widget(['label' => 'Buy', 'variant' => 'btn-primary']),
    'compact' => false,
    'shadow'  => true,
]);

// Begin/end mode for custom body content:
Card::begin(['compact' => true]);
echo '<p>Custom HTML inside the card body.</p>';
Card::end();

Avatar

use iguazoft\daisyui\widgets\Avatar;

// Image avatar with ring and online indicator
echo Avatar::widget([
    'src'     => '/img/user.jpg',
    'size'    => 'w-16',
    'ring'    => 'ring-primary',
    'online'  => true,
    'rounded' => 'rounded-full',
]);

// Placeholder with initials
echo Avatar::widget([
    'placeholder' => 'JD',
    'color'       => 'bg-primary text-primary-content',
    'size'        => 'w-12',
]);

// Grouped avatars
echo Avatar::group([
    ['src' => '/img/1.jpg', 'size' => 'w-12'],
    ['src' => '/img/2.jpg', 'size' => 'w-12'],
    ['placeholder' => '+5', 'color' => 'bg-neutral text-neutral-content', 'size' => 'w-12'],
]);

Stat

use iguazoft\daisyui\widgets\Stat;

echo Stat::widget([
    'vertical' => false,
    'items'    => [
        ['title' => 'Total Users',  'value' => '1,200', 'desc' => '↗︎ 22%'],
        ['title' => 'Revenue',      'value' => '$48K',  'desc' => 'Jan–Feb'],
        ['title' => 'Active Tasks', 'value' => '38',    'figure' => '<svg .../>'],
    ],
]);

Progress / Radial Progress

use iguazoft\daisyui\widgets\Progress;
use iguazoft\daisyui\widgets\RadialProgress;

echo Progress::widget([
    'value'         => 75,
    'max'           => 100,
    'color'         => 'progress-primary',
    'showLabel'     => true,
    'indeterminate' => false,
]);

echo RadialProgress::widget([
    'value'     => 85,
    'color'     => 'text-primary',
    'size'      => '8rem',
    'thickness' => '8px',
    'label'     => '85%',
]);

Rating

use iguazoft\daisyui\widgets\Rating;

// Display only
echo Rating::widget(['value' => 3.5, 'max' => 5, 'half' => true]);

// Interactive radio inputs
echo Rating::widget([
    'value'       => 4,
    'max'         => 5,
    'interactive' => true,
    'name'        => 'product_rating',
    'color'       => 'mask-star-2 bg-warning',
]);

Skeleton

use iguazoft\daisyui\widgets\Skeleton;

// Custom shape
echo Skeleton::widget(['shape' => 'circle', 'size' => 'w-16 h-16']);
echo Skeleton::widget(['shape' => 'rect',   'size' => 'w-full h-4']);

// Presets
echo Skeleton::card();
echo Skeleton::list(rows: 5);

Chat Bubble

use iguazoft\daisyui\widgets\ChatBubble;

echo ChatBubble::widget([
    'message' => 'Hello! How are you?',
    'name'    => 'Obi-Wan',
    'time'    => '12:45',
    'side'    => 'start',
]);

echo ChatBubble::widget([
    'message' => 'Doing great!',
    'side'    => 'end',
    'color'   => 'chat-bubble-primary',
    'status'  => 'Seen',
]);

Carousel

use iguazoft\daisyui\widgets\Carousel;

echo Carousel::widget([
    'arrows'      => true,
    'dots'        => true,
    'slideHeight' => 'h-64',
    'items'       => [
        ['src' => '/img/1.jpg', 'alt' => 'Slide 1'],
        ['src' => '/img/2.jpg', 'alt' => 'Slide 2'],
        ['content' => '<div class="flex items-center justify-center h-full bg-primary text-white text-4xl">Custom</div>'],
    ],
]);

Countdown

use iguazoft\daisyui\widgets\Countdown;

// Static
echo Countdown::widget(['hours' => 2, 'minutes' => 30, 'seconds' => 0]);

// Live countdown (JS)
echo Countdown::widget([
    'targetDate' => '2025-12-31T23:59:59',
    'showDays'   => true,
]);

Timeline

use iguazoft\daisyui\widgets\Timeline;

echo Timeline::widget([
    'items' => [
        ['start' => '2020', 'middle' => '★', 'end' => 'Founded',    'active' => true],
        ['start' => '2022', 'middle' => '●', 'end' => 'Series A',   'endDesc' => '$5M raised'],
        ['start' => '2024', 'middle' => '◆', 'end' => 'IPO'],
    ],
]);

Diff

use iguazoft\daisyui\widgets\Diff;

echo Diff::widget([
    'first'       => '<img src="/before.jpg" class="w-full">',
    'second'      => '<img src="/after.jpg"  class="w-full">',
    'height'      => 'h-64',
]);

KBD

use iguazoft\daisyui\widgets\Kbd;

echo Kbd::widget(['key' => 'Enter']);
echo Kbd::combo(['Ctrl', 'Shift', 'K']);

Tooltip

use iguazoft\daisyui\widgets\Tooltip;

echo Tooltip::widget([
    'tip'      => 'Delete record',
    'content'  => Button::widget(['label' => 'Delete', 'variant' => 'btn-error']),
    'position' => 'tooltip-top',   // tooltip-bottom | tooltip-left | tooltip-right
    'color'    => 'tooltip-error', // tooltip-primary | tooltip-success | ...
]);

// Begin/end mode
Tooltip::begin(['tip' => 'Click me', 'color' => 'tooltip-primary']);
echo Button::widget(['label' => 'Action']);
Tooltip::end();

Navigation

Navbar

use iguazoft\daisyui\widgets\Navbar;
use iguazoft\daisyui\widgets\ThemeSwitcher;
use yii\helpers\Html;

echo Navbar::widget([
    'brand'      => Html::a('MyApp', '/', ['class' => 'btn btn-ghost text-xl']),
    'center'     => ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_TOGGLE]),
    'end'        => ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_DROPDOWN])
                  . Button::widget(['label' => 'Login', 'variant' => 'btn-primary', 'size' => 'btn-sm']),
    'stickyTop'  => true,
]);

use iguazoft\daisyui\widgets\Menu;

echo Menu::widget([
    'items' => [
        ['label' => 'Dashboard', 'url' => '/',          'active' => true],
        ['label' => 'Users',     'url' => '/users'],
        '-',
        [
            'label' => 'Settings',
            'items' => [
                ['label' => 'Profile',  'url' => '/settings/profile'],
                ['label' => 'Security', 'url' => '/settings/security'],
            ],
        ],
    ],
]);

Breadcrumbs

use iguazoft\daisyui\widgets\Breadcrumbs;

// Manual
echo Breadcrumbs::widget([
    'links' => [
        ['label' => 'Products', 'url' => '/products'],
        ['label' => 'Shoes'],
    ],
]);

// Auto from $this->params['breadcrumbs'] (set in Yii views)
echo Breadcrumbs::widget(['useViewParams' => true]);

Tabs

use iguazoft\daisyui\widgets\Tabs;

echo Tabs::widget([
    'type'  => Tabs::TYPE_LIFTED,  // TYPE_DEFAULT | TYPE_BORDERED | TYPE_BOXED
    'items' => [
        ['label' => 'Overview',  'content' => '<p>Overview content</p>', 'active' => true],
        ['label' => 'Analytics', 'content' => '<p>Charts here</p>'],
        ['label' => 'Settings',  'content' => '<p>Settings form</p>'],
    ],
]);

// URL-based (server navigation)
echo Tabs::widget([
    'type'  => Tabs::TYPE_BOXED,
    'items' => [
        ['label' => 'Profile',  'url' => '/profile',  'active' => true],
        ['label' => 'Billing',  'url' => '/billing'],
        ['label' => 'Security', 'url' => '/security'],
    ],
]);

Steps

use iguazoft\daisyui\widgets\Steps;

echo Steps::widget([
    'currentStep'    => 2,
    'completedColor' => 'step-primary',
    'items'          => [
        ['label' => 'Cart'],
        ['label' => 'Shipping'],
        ['label' => 'Payment'],
        ['label' => 'Confirm'],
    ],
]);

Bottom Navigation

use iguazoft\daisyui\widgets\BottomNav;

echo BottomNav::widget([
    'fixed' => true,
    'items' => [
        ['label' => 'Home',    'url' => '/', 'icon' => '<svg ...>', 'active' => true],
        ['label' => 'Search',  'url' => '#', 'icon' => '<svg ...>'],
        ['label' => 'Profile', 'url' => '#', 'icon' => '<svg ...>'],
    ],
]);

Layout

Drawer (Sidebar)

use iguazoft\daisyui\widgets\Drawer;
use iguazoft\daisyui\widgets\Menu;

Drawer::begin([
    'id'          => 'main-drawer',
    'openOnLg'    => true,
    'sideContent' => Menu::widget(['items' => [
        ['label' => 'Dashboard', 'url' => '/', 'active' => true],
        ['label' => 'Users',     'url' => '/users'],
    ]]),
]);

// Main page content
echo '<div class="p-6"><h1>Hello World</h1></div>';

Drawer::end();

Toggle button (anywhere in main content area):

<label for="main-drawer-toggle" class="btn btn-primary drawer-button lg:hidden">
    ☰ Menu
</label>

Hero

use iguazoft\daisyui\widgets\Hero;

echo Hero::widget([
    'title'     => 'Welcome to MyApp',
    'subtitle'  => 'Build something amazing today.',
    'actions'   => Button::widget(['label' => 'Get Started', 'variant' => 'btn-primary'])
                 . Button::widget(['label' => 'Learn More',  'variant' => 'btn-ghost']),
    'minHeight' => 'min-h-screen',
    'bgImage'   => '/img/hero-bg.jpg',
    'overlayOpacity' => '60',
]);

Footer

use iguazoft\daisyui\widgets\Footer;

echo Footer::widget([
    'columns' => [
        [
            'title' => 'Product',
            'items' => [
                ['label' => 'Features', 'url' => '#'],
                ['label' => 'Pricing',  'url' => '#'],
            ],
        ],
        [
            'title' => 'Company',
            'items' => [
                ['label' => 'About', 'url' => '#'],
                ['label' => 'Blog',  'url' => '#'],
            ],
        ],
    ],
    'copyright' => '© 2025 MyApp. All rights reserved.',
]);

Divider

use iguazoft\daisyui\widgets\Divider;

echo Divider::widget(['label' => 'OR']);
echo Divider::widget(['label' => 'Section', 'color' => 'divider-primary']);
echo Divider::widget(['vertical' => true]);

Indicator

use iguazoft\daisyui\widgets\Indicator;
use iguazoft\daisyui\widgets\Badge;

echo Indicator::widget([
    'content'   => Button::widget(['label' => 'Inbox']),
    'indicator' => Badge::widget(['label' => '99+', 'variant' => 'badge-error']),
    'position'  => 'indicator-top indicator-end',
]);

Join

use iguazoft\daisyui\widgets\Join;

// Pagination buttons
echo Join::widget([
    'items' => [
        '<button class="btn join-item">«</button>',
        '<button class="btn join-item btn-active">1</button>',
        '<button class="btn join-item">2</button>',
        '<button class="btn join-item">»</button>',
    ],
]);

// Input + button group
echo Join::widget([
    'items' => [
        '<input class="input input-bordered join-item" placeholder="Search…">',
        '<button class="btn btn-primary join-item">Go</button>',
    ],
]);

Mask

use iguazoft\daisyui\widgets\Mask;

echo Mask::widget([
    'src'   => '/img/avatar.jpg',
    'shape' => 'mask-hexagon',   // mask-heart | mask-squircle | mask-star-2 | ...
    'size'  => 'w-24 h-24',
]);

Stack

use iguazoft\daisyui\widgets\Stack;

echo Stack::widget([
    'items' => [
        '<div class="card bg-primary w-36 ...">A</div>',
        '<div class="card bg-secondary w-36 ...">B</div>',
        '<div class="card bg-accent w-36 ...">C</div>',
    ],
]);

Forms

ActiveForm + ActiveField

use iguazoft\daisyui\form\ActiveForm;

$form = ActiveForm::begin(['id' => 'user-form']);

// Standard inputs (auto DaisyUI classes)
echo $form->field($model, 'name')->textInput(['placeholder' => 'Full name']);
echo $form->field($model, 'bio')->textarea(['rows' => 4]);
echo $form->field($model, 'avatar')->fileInput();
echo $form->field($model, 'country')->dropdownList($countries, ['prompt' => 'Select country']);

// DaisyUI-specific inputs
echo $form->field($model, 'active')->toggle();               // switch
echo $form->field($model, 'volume')->range(['min' => 0, 'max' => 100]);
echo $form->field($model, 'rating')->rating(['max' => 5]);   // star rating

// Checkboxes and radios
echo $form->field($model, 'agree')->checkbox();
echo $form->field($model, 'gender')->radio();

ActiveForm::end();

Grid

GridView

use iguazoft\daisyui\grid\GridView;

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel'  => $searchModel,
    'card'         => true,
    'cardTitle'    => 'Users',
    'cardHeaderHtml' => Button::widget(['label' => '+ New User', 'variant' => 'btn-primary', 'size' => 'btn-sm', 'url' => '/users/create']),
    'zebra'        => true,
    'tableSize'    => 'table-sm',
    'columns'      => [
        'id',
        'name',
        'email:email',
        [
            'class'  => 'yii\grid\ActionColumn',
            'template' => '{view}{update}{delete}',
        ],
    ],
]);

Theme Switcher

use iguazoft\daisyui\widgets\ThemeSwitcher;

// Dropdown (in Navbar end)
echo ThemeSwitcher::widget([
    'mode'         => ThemeSwitcher::MODE_DROPDOWN,
    'label'        => 'Theme',
    'themes'       => ['light', 'dark', 'cupcake', 'dracula', 'cyberpunk'],
    'defaultTheme' => 'light',
    'storageKey'   => 'my-app-theme',
]);

// Light/Dark toggle
echo ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_TOGGLE]);

// Full grid of swatches
echo ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_GRID]);

The selected theme is persisted in localStorage and applied on every page load with no flash.

Complete Backend Layout Example

<?php
use iguazoft\daisyui\widgets\Breadcrumbs;
use iguazoft\daisyui\widgets\Button;
use iguazoft\daisyui\widgets\Drawer;
use iguazoft\daisyui\widgets\Menu;
use iguazoft\daisyui\widgets\Navbar;
use iguazoft\daisyui\widgets\ThemeSwitcher;
use iguazoft\daisyui\widgets\Toast;
use iguazoft\daisyui\grid\GridView;
use yii\helpers\Html;
?>

<?php Drawer::begin([
    'id'          => 'sidebar',
    'openOnLg'    => true,
    'sideWidth'   => 'w-64',
    'sideContent' => Menu::widget([
        'items' => [
            ['label' => 'Dashboard', 'url' => '/',       'active' => Yii::$app->controller->id === 'site'],
            ['label' => 'Users',     'url' => '/users',  'active' => Yii::$app->controller->id === 'user'],
            ['label' => 'Products',  'url' => '/product','active' => Yii::$app->controller->id === 'product'],
            '-',
            ['label' => 'Settings',  'url' => '/settings'],
        ],
    ]),
]) ?>

    <?= Navbar::widget([
        'brand'  => Html::tag('label',
            '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>',
            ['for' => 'sidebar-toggle', 'class' => 'btn btn-ghost lg:hidden']
        ) . Html::a('MyAdmin', '/', ['class' => 'btn btn-ghost text-xl']),
        'end' => ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_TOGGLE])
               . ThemeSwitcher::widget(['mode' => ThemeSwitcher::MODE_DROPDOWN, 'label' => 'Theme'])
               . Avatar::widget(['placeholder' => 'JD', 'color' => 'bg-primary text-primary-content', 'size' => 'w-9']),
        'stickyTop' => true,
    ]) ?>

    <main class="p-6">
        <?= Breadcrumbs::widget(['useViewParams' => true]) ?>

        <?= $content ?>
    </main>

<?php Drawer::end() ?>

<?= Toast::widget() ?>

Available Widgets

Category	Widgets
Actions	Button, Dropdown, Modal, Swap
Data Display	Alert, Avatar, Badge, Card, Carousel, ChatBubble, Collapse, Countdown, Diff, Kbd, Progress, RadialProgress, Rating, Skeleton, Stack, Stat, Timeline, Toast, Tooltip
Navigation	BottomNav, Breadcrumbs, Menu, Navbar, Steps, Tabs, ThemeSwitcher
Layout	Divider, Drawer, Footer, Hero, Indicator, Join, Mask
Forms	ActiveForm, ActiveField
Grid	GridView, LinkPager

iguazoft / yii2-daisyui

Maintainers

Package info

Statistics

Security