UI Suite DaisyUI
A site-builder friendly DaisyUI theme for Drupal, using the UI Suite approach.
Use DaisyUI directly from Drupal backoffice (layout builder, manage display, views, blocks...).
Requirements
This theme requires the following modules:
- UI Patterns 2
- UI Styles
- UI Skins
- UI Icons
This theme can be used with CDN hosted package of DaisyUI (version 4.12.13) or by building your own package.
If you want to build your own DaisyUI / Tailwind CSS package, please follow the "DaisyUI with NPM" section below.
This theme also provides integration with Heroicons. Please follow the "Heroicons with Asset Packagist" section below.
Install libraries
DaisyUI with NPM
Inside /web/libraries/daisyui execute the following command : npm init daisyui
3 options are then available (we recommend the second one):
- What it does if you choose
No need. I already have Tailwind
:- Installs daisyUI
- Adds daiysUI to your tailwind.config.js file.
- What it does if you choose
Yes. Setup Tailwind first
:- Installs Tailwind CSS
- Creates tailwind.config.js file (npx tailwindcss init) with default config
- Creates tailwind.css file with @tailwind directives in it
- Installs daisyUI
- Adds daiysUI to your tailwind.config.js file.
- What it does if you choose
Yes. Setup Tailwind first (with PostCSS)
:- Installs Tailwind CSS
- Creates tailwind.config.js file (npx tailwindcss init) with default config
- Installs PostCSS and Autoprefixer
- Creates postcss.config.js file - Adds Tailwind CSS and Autoprefixer to postcss.config.js
- Installs daisyUI
- Adds daiysUI to your tailwind.config.js file.
(optional) As per DaisyUI documentation it is recommended to install the typography plugin: npm install -D @tailwindcss/typography
Then, edit the tailwind.config.js
file. Initially the file looks like this:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {}
},
plugins: [require("daisyui")]
};
Recommendation of tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'../../themes/contrib/ui_suite_daisyui/dist/css/custom/*.css',
'../../themes/contrib/ui_suite_daisyui/templates/*.{twig,js}',
'../../themes/contrib/ui_suite_daisyui/templates/**/*.{twig,js}',
'../../themes/contrib/ui_suite_daisyui/components/**/*.{twig,js,yml}',
'../../themes/contrib/ui_suite_daisyui/*.ui_styles.yml',
'../../themes/contrib/ui_suite_daisyui/ui_examples/*.yml',
],
safelist: [
'alert-info', 'alert-success', 'alert-warning', 'alert-error',
'badge-neutral', 'badge-primary', 'badge-secondary', 'badge-accent', 'badge-ghost', 'badge-info', 'badge-success', 'badge-warning', 'badge-error',
'badge-xs', 'badge-sm', 'badge-md', 'badge-lg',
'btn-neutral', 'btn-primary', 'btn-secondary', 'btn-accent', 'btn-ghost', 'btn-link', 'btn-info', 'btn-success', 'btn-warning', 'btn-error',
'btn-xs', 'btn-sm', 'btn-md', 'btn-lg',
'card-compact', 'card-side',
'carousel-center', 'carousel-end',
'chat-end',
'chat-bubble-primary', 'chat-bubble-secondary', 'chat-bubble-accent', 'chat-bubble-info', 'chat-bubble-success', 'chat-bubble-warning', 'chat-bubble-error',
'divider-horizontal',
'divider-start', 'divider-end',
'divider-neutral', 'divider-primary', 'divider-secondary', 'divider-accent', 'divider-success', 'divider-warning', 'divider-info', 'divider-error',
'link-primary', 'link-secondary', 'link-accent', 'link-neutral', 'link-success', 'link-info', 'link-warning', 'link-error',
'loading-spinner', 'loading-dots', 'loading-ring', 'loading-ball', 'loading-bars', 'loading-infinity',
'loading-xs', 'loading-sm', 'loading-md', 'loading-lg',
'menu-vertical', 'menu-horizontal',
'menu-xs', 'menu-sm', 'menu-md', 'menu-lg',
'progress-primary', 'progress-secondary', 'progress-accent', 'progress-info', 'progress-success', 'progress-warning', 'progress-error',
'stats-vertical',
'step-neutral', 'step-primary', 'step-secondary', 'step-accent', 'step-info', 'step-success', 'step-warning', 'step-error',
'steps-vertical',
'table-xs', 'table-sm', 'table-md', 'table-lg',
'tabs-bordered', 'tabs-lifted', 'tabs-boxed',
'tabs-xs', 'tabs-sm', 'tabs-lg',
'timeline-vertical',
'toast-start', 'toast-center', 'toast-end', 'toast-top', 'toast-middle', 'toast-bottom',
],
theme: {
extend: {}
},
plugins: [
require("daisyui"),
require('@tailwindcss/typography'),
],
daisyui: {
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
"dim",
"nord",
"sunset",
],
darkTheme: "dark", // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
themeRoot: ":root", // The element that receives theme color CSS variables
}
};
Then eventually, start the Tailwind CLI build process: npx tailwindcss -i tailwind.css -o daisyui.css --minify
Herocions with Asset Packagist
If you use the website Asset Packagist, the composer.json can be like:
{
"require": {
"composer/installers": "2.*",
"oomphinc/composer-installers-extender": "2.*",
"npm-asset/heroicons": "2.1.5"
},
"repositories": {
"asset-packagist": {
"type": "composer",
"url": "https://asset-packagist.org"
},
"drupal": {
"type": "composer",
"url": "https://packages.drupal.org/8"
}
},
"extra": {
"installer-paths": {
"app/libraries/{$name}": [
"type:drupal-library",
"type:bower-asset",
"type:npm-asset"
]
},
"installer-types": [
"bower-asset",
"npm-asset"
]
}
}
Installation
Install as you would normally install a contributed Drupal theme. For further information, see Installing Drupal Themes.
Configuration
The theme has no menu or modifiable settings on its own.
Configuration is provided by the UI Suite ecosystem modules.
Maintainers
Current maintainers:
- Michael Fanini - G4MBINI
Supporting organizations:
- Dropteam - Link company - Link d.org