Hi all. Firstly thanks for the amazing work.

Feature Request

This issue is a request to add an option in the daisyui config to allow customize the class names with a prefix.

Rationale

This stems from my most recent project where I came across this issue: the words used for naming components in daisy are widely used. This results in two problems:

1. If daisy has to coexist with another styling system (in our case, we were in the process of migrating bootstrap to tailwind), there will be conflict.

2. Due to the generous nature of Tailwind's default extractor, if someone is working in a React .jsx file and has the word modal in some comment like the following, for example:

   function Component() {
     // this is meant to be my custom modal <-- modal is here and not in class attribute
     return (<div>...</div>);
   }
   

   Tailwind will include the .modal class in the output. This results in unused css and unoptimized build. Having a prefix for all components and their associated utilities will help with this.

Proposed Implementation

Please look at the pull request linked to this issue for details. There're two parts to this.

The Config Option

We can use postcss-js with the postcss-class-prefix plugin to add prefix on demand in user's tailwind.config.js:

const postcssJs = require('postcss-js');
const postcssPrefix = require('postcss-class-prefix');

//...

const prefix = config('daisyui.prefix');
if (prefix) {
  file = postcssJs.sync(postcssPrefix(prefix))(file);
}

Documentation Site Improvement

In the pull request, I also added instruction about this new option in the config page. But more importantly, I feel like the prefix should be a user-changeable global variable (similar to the theme dropdown) that is actually reflected in the class table and the html code examples.

The change to html codeblocks to support dynamic prefix requires further discussion. Right now my implementation includes a custom svelte action that replaces $$ with the prefix value coming out of a global store. This requires the following change to every pre block that wants to support this:

<pre slot="html" use:replace={{ to: $prefix }}>{
`<button class="$$btn">Button</button>
<button class="$$btn $$btn-primary">Button</button>
<button class="$$btn $$btn-secondary">Button</button>
<button class="$$btn $$btn-accent">Button</button>
<button class="$$btn $$btn-ghost">Button</button>
<button class="$$btn $$btn-link">Button</button>`
}</pre>

As this requires a large refactor for all endpoints in the components path, I'm waiting for your discussion and confirmation before including them all in the PR. Right now only the button endpoint is done.

This solution requires work now (which I am happy to do) but will require low maintenance later. I was thinking about having a dictionary for all the classes from daisy and do a one-place-search-and-replace-all type of wrapper/component/action but this comes with a runtime penalty for performance.

How well is this tested?

The first thing I tested was the intellisense of VSCode Tailwind, which works well

So far I have not encountered any breaking change. But please let me know if you think otherwise or found any problem.

Potential Issues & Further Discussion

postcss-js has released 4.0.0 version but it requires postcss 8.3. Unfortunately postcss-clean does not support newer version of postcss (yet?) and will break build step. Eventually I went with 3.0.3 for postcss-js

I think at some point we should switch to cssnano to keep up to date with the postcss ecosystem. Just my opinion that is open for discussion.

Modals have an animation for opening, but closing just happens instantly with no animation. It would be nice to have a closing animation, potentially just the opening animation in reverse.

This also occurs on the docs so I know it is not an issue with my code.

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.

I'm using firefox 96.0 on ubuntu 20.04

When i take a screenshot of the documentation of the checkbox https://daisyui.com/components/form/checkbox/ at 100% page zoom. The checkbox check doesn't look so good (see below left side). I also zoomed in with my photo editor to make the problem more clear (see further down). I think the checkbox should look like the one i manually adjusted on the right side.

Hey All,

I get this error when I run npm run build

Creating an optimized production build...

🌼 daisyUI components 1.16.2  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[22], utilities
  
Failed to compile.

Syntax error: postcss-custom-properties: <css input> Unknown word (1:1)
> 1 | var(--b1)/var(--tw-bg-opacity,1)
    | ^

I followed this tailwind guide to create a fresh react project,

https://tailwindcss.com/docs/guides/create-react-app

if I remove require("daisyui") from tailwind.config.js then running npm run build, the project builds just fine but breaks when I add daisyui in the plugins section

My package.json

{
  "name": "github-finder",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "daisyui": "^1.16.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0-next.58",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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.4.0",
    "postcss": "^8.4.4",
    "tailwindcss": "^3.0.0"
  }
}

Hello, I would like to use DaisyUI to my nextjs pwa but I have an issue using the library. In storybook works as expected but in next.js I see this log all the time and my PWA does not load

It's a monorepo and I have created a shared package that I use daisyUI there with react components that I import to my PWA

I attach the config files

next.config.js

const withTM = require('next-transpile-modules')(['@forest-restoration/shared'])
const withPWA = require('next-pwa')
const withImages = require('next-images')
const { i18n } = require('./next-i18next.config')

const STUDIO_REWRITE = {
  source: '/studio/:path*',
  destination:
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3333/studio/:path*'
      : 'https://forestrestoration.sanity.studio/:path*',
}

module.exports = withPlugins(
  [
    withPWA({
      webpack: (config) => {
        config.resolve.fallback = {
          fs: false,
          module: false,
          path: false,
          os: false,
          stream: false,
        }
        return config
      },
      pwa: {
        dest: 'public',
        register: true,
        skipWaiting: true,
      },
    }),
    withImages,
    withTM(),
  ],
  {
    pageExtensions: ['page.js', 'page.tsx', 'page.ts'],
    reactStrictMode: true,
    images: {},
    i18n,
    redirects() {
      return [
        process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true'
          ? {
              source:
                '/((?!maintenance)(?!_next)(?!static|(?!image))(?!favicon-16x16.png)(?!favicon-32x32.png)(?!icon-192x192.png)(?!manifest.json)(?!themeToggle.js).*)',
              destination: '/maintenance',
              permanent: false,
            }
          : null,
      ].filter(Boolean)
    },
    rewrites: () => [STUDIO_REWRITE],
    images: {
      domains: ['cdn.sanity.io'],
    },
  }
)

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['*.{js,ts,jsx,tsx}'],

  variants: {},
  plugins: [
    require('tailwindcss-filters'),
    require('@tailwindcss/typography'),
    require('tailwindcss-hyphens'),
    require('@tailwindcss/line-clamp'),
    require('tailwind-accent-color')(),
    require('daisyui'),
  ],
  daisyui: {
    themes: [
      {
        light: {
          primary: '#a991f7' /* Primary color */,
          'primary-focus': '#8462f4' /* Primary color - focused */,
          'primary-content': '#ffffff' /* Foreground content color to use on primary color */,

          secondary: '#f6d860' /* Secondary color */,
          'secondary-focus': '#f3cc30' /* Secondary color - focused */,
          'secondary-content': '#ffffff' /* Foreground content color to use on secondary color */,

          accent: '#37cdbe' /* Accent color */,
          'accent-focus': '#2aa79b' /* Accent color - focused */,
          'accent-content': '#ffffff' /* Foreground content color to use on accent color */,

          neutral: '#3d4451' /* Neutral color */,
          'neutral-focus': '#2a2e37' /* Neutral color - focused */,
          'neutral-content': '#ffffff' /* Foreground content color to use on neutral color */,

          'base-100': '#ffffff' /* Base color of page, used for blank backgrounds */,
          'base-200': '#f9fafb' /* Base color, a little darker */,
          'base-300': '#d1d5db' /* Base color, even more darker */,
          'base-content': '#1f2937' /* Foreground content color to use on base color */,

          info: '#2094f3' /* Info */,
          success: '#009485' /* Success */,
          warning: '#ff9900' /* Warning */,
          error: '#ff5724' /* Error */,
        },
        dark: {
          primary: '#f79191' /* Primary color */,
          'primary-focus': '#f46262' /* Primary color - focused */,
          'primary-content': '#ffffff' /* Foreground content color to use on primary color */,

          secondary: '#f6d860' /* Secondary color */,
          'secondary-focus': '#f3cc30' /* Secondary color - focused */,
          'secondary-content': '#ffffff' /* Foreground content color to use on secondary color */,

          accent: '#37cdbe' /* Accent color */,
          'accent-focus': '#2aa79b' /* Accent color - focused */,
          'accent-content': '#ffffff' /* Foreground content color to use on accent color */,

          neutral: '#3d4451' /* Neutral color */,
          'neutral-focus': '#2a2e37' /* Neutral color - focused */,
          'neutral-content': '#ffffff' /* Foreground content color to use on neutral color */,

          'base-100': '#ffffff' /* Base color of page, used for blank backgrounds */,
          'base-200': '#f9fafb' /* Base color, a little darker */,
          'base-300': '#d1d5db' /* Base color, even more darker */,
          'base-content': '#1f2937' /* Foreground content color to use on base color */,

          info: '#2094f3' /* Info */,
          success: '#009485' /* Success */,
          warning: '#ff9900' /* Warning */,
          error: '#ff5724' /* Error */,
        },
      },
    ],
  },
}

In my header, I have a hamburger menu that makes use of the drawer. Unfortunately, the drawer only takes up the small space that the header has at the top, rendering it quiet useless. How can I make it take up the entire screen?

Hi.

Apparently drawer-content which has max-height: 100vh breaks scroll history when user navigates back. I've used docs an all content(nav, content and footer) were placed into drawer-content by hierarchy provided in the docs.

I mainly use it for a mobile, so it's only relevant to make 100vh max when opened. Not sure if that's the bug or something I'm doing wrong, altho I've came up with a temporary fix by adding some scss:

.drawer-toggle ~ .drawer-content {
  max-height: 100%;
}

.drawer.drawer-end .drawer-toggle:checked ~ .drawer-content {
  max-height: 100vh;
}

So now max-height is only set when drawer is opened(in my case it's only for mobile so it's what's needed).

Anyone faced same issues ?

Just in case, hierarchy pseudo-example I use:

<div class='drawer'>
 <input id='drawer'/>
 <div class='drawer-content'>
   header
   <label for='drawer'/>
   content
   footer
 </div>
 <div class='drawer-side'>
   side menu
 </div>
</div>

Hi,

I think DaisyUI is a great project.

Could I please put in an enhancement for a Toggle Button (2 state - on/off) which supports an On state text label or image and an Off state text label or image?

A Toggle Button Group would also be very useful.

Alternatively allow the Checkbox On and Off states to support custom SVG's or images.

Many thanks,

Shaun

Hello dear Pouya. I have a problem with building config, my main project is in '/folderOne' and i've got some core components in another folder ('/core'). I've used some daisyUI components in core, in dev server it's rendered as it should, but when i build, daisyUI don't recognize that components and styles are not added!. Is there any way you can think of to solve this problem? Thanks in advanced, you've done a great job, really appreciate daisy.

hi,maintainer! I am using .dropdown with a small modal, but when I hide it, the height of the element remains and so does the scrollbar. The CSS defining the dropdown is visibility:hidden, so can I submit a pull request with an additional definition of display:none (&block)?

I think inputs can be simplified. What takes this amount of code:

<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">What is your name?</span>
    <span class="label-text-alt">Alt label</span>
  </label>
  <input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
  <label class="label">
    <span class="label-text-alt">Alt label</span>
    <span class="label-text-alt">Alt label</span>
  </label>
</div>

Can really be condensed to

<div class="form-control">
  <label for="input1">What is your name?</label>
  <label for="input1">Alt Label</label>
  <input id="input1" type="text" placeholder="Type here" class="border border-sky-500" />
</div>

• A label does not need a class .label. Default style can be applied to the label element.
• It is not necessary to nest span within label. Any formatting can be done through the class attribute of label.
• The alternative labels could be identified by the nth-child selector. Where the first label would always be the primary and all others would be alternative labels.
• The positioning of the label attribute could be managed with an additional class <label for="input1" class="label-pos-{pos}">What is your name?</label>, where {pos} would be tl | tr | bl | br.
• An input does not need a class .input. Default style can be applied to the input element with the help of the type= attribute.
• When you want to apply a border, instead of .input-bordered.input-primary you could just apply .input-primary and it still works. Maybe just remove the superflous .input-bordered?

Last but not least, maybe even the .form-control could be removed and labels and groups would be grouped together via the for= attribute. If something like that would even be possible.

This PR is very useful to help with form validation. It allows having a condition of not opening it if the value of data-tip is false. Please see this example I created to demonstrate its use.

https://svelte.dev/repl/79a08e408d9e464aad574b46fa9e1feb?version=3.55.0

For the most common use cases, modals should appear in the center of the screen and darken out the entire background. Currently, daisyui has modals open within the scope of the parent container.

Is there some option to make it global so to speak? Or would I have to send state back up the tree and then render it way at the top of the tree?

Thank you?

Actual Collapse element cannot be used in combination with table 😕

Exemples: https://mui.com/material-ui/react-table/#collapsible-table https://codepen.io/pc3b3r/pen/vLxONL?editors=1010

This would be an enhancement to the DaisyUI range or progress bar - allowing the range to be thinner where a configurable moz range thumb does not look weird, also maybe configurable moz range thumb color. Below is a screenshot, at the top is a custom range, and below are the daisyui range.

Yes, this can be custom made, but I imagine this would be reused by many DaisyUI folks as this is very common in music players. Right now, the range seems fat and large to what is actually needed for tracking location in a track. Where something more minimal could be used. When you adjust the height on the DaisyUI range also, it starts to look weird like Pong.

An alternative could be just adding a moz range thumb to the current DaisyUI Progress, and could emulate this common look in music players.