I really loved the built-in themes, especially the wireframe one. It would be cool if we also had a glass theme, or something like the Windows 10 frosted glass design.

Thanks!

Disabling animation doesn't work on either Firefox or Chrome, visible on the documentation page for buttons at the very bottom.

Are these examples in https://daisyui.com/components/accordion/ suppose to expand when clicked? It's not working for me.

Hi @saadeghi, love your work on daisyui!

I haven't found the Modal Component, yet.
Is it on purpose since for example it'll be provided by react modal or will you add it later?

Thank you for your great work btw.

Hi, I work with daisy (great project btw) and I noticed better badge wrap with this:

.card-actions {
   flex-wrap: wrap;
}

and for the card with badge example:

<div class="mb-2 space-x-2 card-actions">
    <div class="badge badge-ghost mb-2">Colors</div>
    <div class="badge badge-ghost mb-2">UI Design</div>
    <div class="badge badge-ghost mb-2">Creativity</div>
</div>

Thank you for your time!

Hey, I'm trying to set up a new project using Svelte with Vite as build tool and WindiCSS.

btn-primary doesn't seem to work, but bg/text-primary seems to work fine.

I have uploaded a repo showcasing the issue.
https://github.com/atresnjo/svelte-vite-daisyui-windicss

Here's what the output looks like

Thanks again for your great work so far, loving your slick design! 🥇

.menu.compact li>a, .menu.compact li>span{ margin-bottom : 3px; }

Before SS : https://d.pr/i/ZMZ6E4
After SS : https://d.pr/i/0PQ0ru

Repo showcasing the issue

The local dev build works fine, but the production build somehow messes up with the CSS. The weird thing is that the DevTools shows duplicates, even though there are no duplicates in the actual generated CSS file.

Asked also in Svelte discord, will report back once I know more. If anyone has an idea, feel free to share. :)

Hi,

I tried on TailwindPlay with a simple Card here: https://play.tailwindcss.com/IiCmZ5EuXm and the "bg-primary" is not working. While the same html works as expected in CodePen with CDN css files: https://codepen.io/zemian/pen/jOBrpvR. Is there some configuration I need to enable to use these schematic role names in TailwindPlay?

Hi,

Would it be possible to use a class, for example, .active to show/hide the modal? This would ease controlling it via React (# aren't ideal).

Thanks!

Hi, first I want to say thanks for the great work; the components look great!

I wanted to play around with the components for a possible project, so I created a test app using https://www.npmjs.com/package/cra-template-tailwindcss-typescript

I followed the instructions and installed it via npm, almost everything works; but when I set a theme using data-theme the font colors don't update, and for example navbar background color doesn't update; like it does in your demo. Hope you can clear this up for me, thanks a lot! 👍

Here's how it looks compared to yours

Hey @saadeghi,
we have noticed that currently the accordion-body class has a max-height: 100vh. This seems to hide longer content inside the accordion-body. How can we override the value to max-height: 100%?

<style>
.accordion-item input:checked~.accordion-body {
    max-height: 100vh; // CHANGE TO 100%
</style>

We have tried to do this by brute force with a custom style="max-height: 100%", but it doesn't seem to have an effect.

Is there an elegant way to overwrite this?

Thanks.

".accordion-item input" is used to hide the check box unfortunately it also hides all inputs in the body of the accordion

Could it be changed to ".accordion-item input:first-child"

Two of the common usecases are single date selection and a date range selection.

Hi. I recognized that changing colors is not possible in Safari but works fine in Chrome. The color picker just doesn't show up.

https://daisyui.netlify.app/core/colors

I'm having this error trying to build a React app to deploy:

Using this package.json:

{
  "name": "app_mobile",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^0.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "daisyui": "^0.27.2",

    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.5",

    "react": "^17.0.2",
    "react-dom": "^17.0.2",

    "react-scripts": "^2.0.5",

    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "run-p watch:css start:react",
    "start:react": "react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css",
    "watch:css": "postcss -w src/assets/css/tailwind.css -o src/assets/css/main.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "eslint-plugin-react": "^7.21.5",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.2.15",
    "postcss-cli": "^8.3.1",
    "redux-devtools-extension": "^2.13.8",
    "tailwindcss": "^2.1.2"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

My project was working perfectly before I add Daisyui and postcss 8
Any idea?

HI if i add all the themes only forest and retro work, all others was working fine, until i changed to a slightly different structure,

makes no difference if purge is false,

Tailwind config

purge: {
        enabled: true,
        content: [
            './Pages/*.razor',
            './Shared/*.razor',
            './App.razor',
            './wwwroot/index.html',
        ],
        options: {
            safelist: [
                /data-theme$/,
            ]
        },
    },
    daisyui: {
        styled: true,
        themes: true,
        resets: true,
        utils: true,
        logs: true,
        rtl: false,
    },
    darkMode: false, // false or 'media'
    theme: {
        
    },
    variants: {
        extend: {
            fill: ['hover', 'focus'],
            backgroundColor: ['active'],
        },
    },
    plugins: [
        require('daisyui'),
    
],

GulpFile

const gulp = require('gulp');
var size = require('gulp-size');
gulp.task('css', () => {
    const postcss = require('gulp-postcss');

    return gulp.src('./styles/site.css')
        .pipe(postcss([
            require('precss'),
            require('tailwindcss'),
            require('autoprefixer'),
            require('cssnano'),

        ]))
        .pipe(size({ title: 'CSS', gzip: true, showFiles: true }))
        .pipe(gulp.dest('./wwwroot/css/'));
});

PostCss

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        cssnano({
            preset: 'default'
        }),
        purgecss({
            content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        })
    ]
}

The question is why only Forest & Retro work, any ideas?

Thanks

S

I think it makes sense to create an upstream issue here for bugs which make DaisyUi not work properly with WindiCSS.

WindiCSS-related bugs

All those are bugs in WindiCSS!

Big improvements were already made in the last couple of days. I hope it will work fully soon.

Hey @saadeghi ,
Daisy UI is becoming really powerful set UI components.

We though that adding few more components and improvements on the existing ones, would make Daisy UI even more complete E.g.

• tooltip - we can pretty much achieve this with an absolute positioned dropdown that opens up on mouse hover opening a panel/card etc, however not sure if it makes sense to factor it out as a separate component that can be used in combination with other components like button, form-toggle, menu etc. here is an example
• treeview - very similar to accordion with the difference that it can go in depth of multiple levels here is an example
• timeline - this is more advanced and composite control that would have slots for its timeline items and their icons/images/avatars. here is an example
• badge (floating or overlapping) - we already the badge component which great as it is. Here the idea is more to provide an example of how to place the badge in one if the upper/lower angles of e.g. a button or avatar similar to this example e.g. indicating user online/offline status. Probably this can be achieved by using margins on bottom or top e.g. mb-x. However, the idea is to show these in the examples of Daisy UI.
• dropdown programmatic open/close - Current dropdown is really powerful option to display complex menu items. However, since, unlike accordion its status (open/closed) is not mapped to any input element, we haven't found a way to programmatically open or close a dropdown. Especially this is an issue if the dropdown opens up on mouse hover and inside the dropdown menu there is a form component e.g. form-toggle. In that case, if the user clicks on the form-toggle and leaves with the mouse the menu area, the menu still remains open. So in such case it would make sense to have an option to programmatically close it. Maybe, there is a way around this, that we are not aware of...

Not sure how feasible is to implement these components and improvements as CSS-only-components (without JS logic), but definitively these would make Daisy UI more complete.

Thanks for the already existing set of great UI components.

Hi there.

I am using DaisyUI together with Vite and WindiCSS (vite-plugin-windicss) and it is almost working.

There is one problem with CSS variables, though (Styled components and themes).
DaisyUI uses prejss-cli to convert the css into JS objects.
Strangely, during this conversion, CSS vars get mangled from:

--tw-bg-opacity

To something like this:

-TwBgOpacity

The conversion from kebab to Pascal case would be ok, windicss can handle this, the problem is the deleted dash at the start.
It only happens for CSS variables starting with double dash.

Something in the prejss-cli conversion is going wrong.

If I manually replace all -Tw with --Tw in daisyui/dist/styled.js, the styled components seem to work.

Hi there,
I'm trying to understand if have some kind of reliable state or indicator that a drawer is opened or closed and how we can open/close a drawer component programmatically?

I've tried to e.g. to change the checked value of the checkbox (first example) by this Svelte code:

<input id="my-drawer" type="checkbox" class="drawer-toggle" checked={checked}> 

<div class="flex flex-col items-center justify-center drawer-content">
    <label id="my-drawer-label" for="my-drawer" class="btn btn-primary drawer-button">open menu</label>
  </div> 

...
<button id="btn1" class="btn" on:click={toggleDrawer1} > open/close drawer </button>

<button id="btn2" class="btn" on:click={toggleDrawer2} > open/close drawer </button>

let checked = false

const toggleDrawer1 = () => {
   checked = !checked
}

const toggleDrawer2 = () => {
  const elem = document.getElementById('my-drawer-label')
  elem.click()
}
 

It seems that clicking on id="btn1" doesn't result in drawer being opened/closed, even though the checked variable is being changed.

Clicking on id="btn2" does open/close the drawer.

However, our issue when the drawer is opened and clicking anywhere on the overlay and closing the drawer, it doesn't change the checkbox id="my-drawer" checked value so we don't have a state per say, that we can rely on that the Drawer is opened or closed based on which we can show or hide some UI components.

So maybe to rephrase our question, is there anything reliably we can use as a state of the drawer by which we can know in the code if the drawer is shown or hidden? e.g. checkbox checked value or element having certain class or any other indicator?

The same state would be valuable to know in other components e.g. in accordion, to know if it's open or closed.

I hope I was clear enough.

Thanks.

How to disable animation
i dont like the animation when you click on a button

I created an issue here

Hi @saadeghi,

First of all, thanks for this awesome UI library!

After upgrading from 11.5 to 14.2, I noticed that all buttons are using dark theme scheme, even in light theme. https://imgur.com/a/eqSVdoD

If this isn't a bug, how could I set the behaviour to the old one?

Thanks!

Hi, awesome work with Daisy UI @saadeghi !
I would like to contribute to the docs but couldn't find any repo. Maybe you could make it open source ?

Hey Guys,

Love the UI, is there plans to add a Navigation Drawer/Sliding Sidebar component in the future?

A date picker would be really helpful

Subrequests

• Ranged selector
• Show only weekdays
• Events (dots on individual date)
• Month only picker (no days)

Hello @saadeghi ,

Your UI framework is the best I found in the web. And, now I am working in a project with Svelte/Sapper and I think would be good to implement a solution like a component framework for Svelte/Sapper using your UI framework.

I'm not good with css, but the Svelte/Sapper is very easy to work with components.

What do you think about that?

While checking out the components here, I noticed that the Navbar did not collapse or have any special function for a smaller viewport - as for a mobile device.

Is there a way to have a navbar that only shows a menu icon and unfolds a drawer for mobile screens but has a full and proper menu bar on tablets and desktop?

The fold-out menu that Bootstrap uses feels a little off, Drawers have a better way of customization.

Besides that, I love the components and theming features! Really great work there :)

Kind regards, Ingwie

have problem on toggle class when dir="rtl"

in the class is

.toggle~.toggle-mark {
    justify-content: flex-start;
}

but in rtl need to be

.toggle~.toggle-mark {
    justify-content: flex-end;
}

how can i change this?

When viewing https://daisyui.com/components/form/input on a real iPhone XR, the "connected" example of input with button has the button wrapped in new line below the input (Not together in a single line). However the one "with space" looks fine on the same iPhone (it's one line).

NOTE: When I view the page in Firefox Devtool with Responsive Mode, and then select iPhone X, the form UI has no issue! Only on a real iPhone I see the problem.

Hi there,
first of all, thanks for your effort put in Daisy UI. It really is awesome and flexible addition on top of Tailwind.

This is more of a question, than an actual issue.

Recently, we have encountered a requirement to display in a navbar component a Dropdown list that renders itself in form of a menu like this one:

• https://vuetifyjs.com/en/components/menus/#absolute-without-activator

Current form-select seems ok, but it's it cannot be customized e.g. items prefixed with icon, sub items etc. And the menu
component seems static (no dialog/modal option).

We tried to combine a normal btn that opens up a modal, however the positioning of the modal seems to be always centered and it's not clear that the opened up modal belongs to the btn that has opened it.

So we are wondering, if there is a way with the current version of Daisy UI to implement a Dropdown list that opens up a menu right next to the activator btn (bottom, top, left or right) in a modal mode (like the link provided)? Or if not, is it something feasible to hope it gets implemented in Daisy UI soon?

Many thanks in advance.

/GJ

I have a question and a suggestion ;)

For me it is unclear after reading the website whether daisyui is using the base theme by default.

e.g. on https://daisyui.netlify.app/docs/default-themes it just says i need to include <html data-theme="dark"> to my html, but what if i don't? Do i then use the base colors? I would add this to the docs if that is how it works.

i'm currently trying to integrate it with windicss and it does not work yet, that's why i am confused, i am sure if it would work i would just "see" it. But now that i only have the docs and cannot make it yet work in the code, i would propose this little documentation improvement.

Another hint could be added to the themes config page https://daisyui.netlify.app/docs/config.
Something like
"If it's true, default themes will be included. If false, you can still define your own custom theme"

After every transition the offset increases a little.

Only the Large text example seems to be working correctly a different zoom levels.