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, dependency requirements, and post-installation verification |
| 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 30+ utility class styles to blocks, Layout Builder sections, and pattern instances |
| 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 that delegate to DaisyUI SDC components |
| Understand theme preprocess hooks and form styling | Preprocess & Hooks | Theme hook implementations in ui_suite_daisyui.theme for pagers, forms, and inputs |
| 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… |
| 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 | Use grid components as Layout Builder layouts with UI Styles for section and block styling |
| 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, DaisyUI component accessibility, and WCAG concerns |
| Find source references and maintenance info | Sources & Maintenance |