UI Suite DaisyUI
Drupal theme integrating DaisyUI 5 component library via UI Patterns 2, UI Styles, UI Skins, and UI Icons. Provides 51 Single Directory Components, 35 theme variants, Tailwind CSS 4 integration, and a Vite-based starterkit for sub-theming.
| I need to... | Guide | Summary |
|---|---|---|
| Decide if UI Suite DaisyUI fits my project | Overview & Decision | When to use UI Suite DaisyUI vs alternatives like Radix, custom Tailwind themes, or UI Suite Bootstrap |
| Understand how UI Patterns, Styles, Skins, and Icons integrate | Architecture | How UI Patterns, UI Styles, UI Skins, and UI Icons integrate with DaisyUI components in the theme |
| Install the theme and verify setup | Installation & Setup | Composer install, theme enable, hard dependencies (ui_patterns, ui_icons) vs. optional submodules (ui_patterns_library, ui_styles_library, ui_patterns_layouts) that gate the admin browsers and Layout Builder grids -- most 404s are a missing submodule, not a broken theme. |
| Find a DaisyUI component and its props/slots | Theme Components Catalog | Complete reference of all 51 DaisyUI components with props, slots, variants, and usage examples |
| Apply utility styles to blocks or Layout Builder sections | UI Styles Integration | Apply the theme's 10 UI Styles plugins (background/text color, font size, box shadow, width, padding, margin, glass, mask) to blocks, Layout Builder sections, and pattern instances -- there is no border-color, layout, or flexbox/grid style; add those in a sub-theme. |
| Switch DaisyUI themes or customize CSS variables | UI Skins Integration | Switch between 35 DaisyUI themes and customize 28 CSS design tokens via the admin UI |
| Override a system template with DaisyUI styling | Template Overrides | 22 Drupal template overrides delegate to DaisyUI SDC components; every form template lives in templates/forms/, not templates/system/, and tab variants use DaisyUI 5 names (lift, border) -- the v4 lifted/bordered/form-control spellings render unstyled. |
| Understand theme preprocess hooks and form styling | Preprocess & Hooks | No hook adds a CSS class to a form element -- hooks in ui_suite_daisyui.theme, includes/form.theme, and includes/settings.theme only compute a config array (#daisy_ui_form); templates/forms/input.html.twig and form-element.html.twig read it and decide the classes. There is no form_alter() and no preprocess_field(). |
| Create a sub-theme with Vite and Tailwind 4 | Sub-theming Starterkit | Create a sub-theme when you need to customize the base theme's components, add new components, override UI Styles, or set up a proper Tailwind/DaisyUI build pipeline. Alpha6 ships a full starterkit with Vite, Tailwind CSS 4, DaisyUI 5, and example component overrides. |
| Decide whether to reuse, override, or create a component | Component Reuse Decision Tree | When deciding whether to use a base theme component as-is, override it in your sub-theme, or create a new component from scratch. |
| Use DaisyUI components with Layout Builder | Layout Builder Integration | All 51 components register as Layout Builder layouts once ui_patterns_layouts is enabled -- icon_map only draws the picker thumbnail on the grids, it does not gate registration. Pick by slot shape (card's header/body/footer suit LB regions; button's single label slot does not). |
| Choose between UI Patterns wiring vs Twig include() for blocks → SDC | SDC Rendering Decision | For 1-3 simple block types without per-instance variants, use UI Patterns wiring (native, no templates). For 5+ block types, per-instance variants, or complex multi-field composition, use Twig include() — it avoids 3-level entity_field nesting per slot and reads LB block configuration directly for per-placement variants. |
| Understand the CSS/JS asset pipeline | Libraries & Assets | Pre-compiled CSS library, CKEditor 5 integration, and Heroicon pack configuration |
| Add custom components or override DaisyUI tokens | Customization Patterns | Add custom components, override DaisyUI tokens, and extend base components |
| Follow best practices and avoid common mistakes | Best Practices & Anti-Patterns | When UI Suite DaisyUI fits, recommended patterns, anti-patterns to avoid, and performance considerations |
| Address security and accessibility concerns | Security & Accessibility | Asset pipeline security, Twig escaping, form security -- the theme touches forms only through #daisy_ui_form config hooks and a theme-settings alter, never hook_form_alter() -- DaisyUI component accessibility, and WCAG concerns. |
| Find source references and maintenance info | Sources & Maintenance |