When using the (react) Drawer the following warning is thrown.
You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

Click action in https://react.daisyui.com/?path=/story/layout-drawer--default doesn't open Drawer Side

We want to achieve full coverage of our components in Storybook. This means all features and design options available to users are represented by a separate story.

At the very minimum, we want to show as much as the official daisyUI docs show to demonstrate that everything has been ported over for this React wrapper.

Here are the components missing stories from the daisyUI docs:

• Dropdown
• Modal
• KBD
• Stats
• Input
• Rating
• Select
• TextArea
• Drawer
• Hero
• InputGroup
• Mask
• Breadcrumbs
• Menu
• Navbar
• Steps
• Tabs

When opening a modal I can't get an autofocus on an input field. When I check in Chrome devtools and check "document.activeElement" I see the button that opened the modal is actually in focus.

I see a lot of solutions for bootstrap mentioning autoFocus={false} on the modal and true on the input but autoFocus is not here as a Modal propery. Any advice?

Getting exception while running npm run generate component Square

Output:

npm run generate component Square 

> [email protected] generate
> plop "component" "Square"

/Users/****/Desktop/Temp/react-daisyui/node_modules/plop/bin/plop.js:3
import { Plop, run } from "../src/plop.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Expected: create new component

I use pnpm to solve some npm dependencies bugs but now I cannot import react-daisyui.

Error

➜  my-project-name git:(dark-mode) ✗ npm run dev

> next-js-boilerplate@1.0.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/indicozy/Documents/Projects/oponai/my-project-name/.env
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/[email protected]_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react/jsx-runtime' imported from /home/indicozy/Documents/Projects/oponai/my-project-name/node_modules/.pnpm/react-daisyui@2.0.3_tgktzqjq2hhcpfjfdazojt3jfa/node_modules/react-daisyui/dist/react-daisyui.modern.js
Did you mean to import react@17.0.2/node_modules/react/jsx-runtime.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Stack: NextJS v12.1.6, React v17.0.2, daisyui v2.15.3, react-daisyui v2.0.3

Hi 👋

problem

<Alert icon={<ExclamationTriangleIcon width="24" height="24"/>} className={"mt-6 alert-warning" + (showAlert ? "block" : "hidden")}>ウォレットが未接続です</Alert>
<Alert icon={<ExclamationTriangleIcon width="24" height="24"/>} status="warning" className={"mt-6" + (showAlert ? "block" : "hidden")}>ウォレットが未接続です</Alert>

dependensies

{
  "name": "nft-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.11",
    "@rainbow-me/rainbowkit": "^0.6.1",
    "daisyui": "^2.30.0",
    "ethers": "^5.7.1",
    "firebase": "^9.10.0",
    "next": "12.3.1",
    "next-transpile-modules": "^9.0.0",
    "react": "18.2.0",
    "react-daisyui": "^2.4.1",
    "react-dom": "18.2.0",
    "wagmi": "^0.6.7"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "eslint": "8.23.1",
    "eslint-config-next": "12.3.1",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }
}

This causes a Warning: Each child in a list should have a unique "key" prop warning in the console

I got this warning from webpack:

Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Issue
Due to defaultChecked is always set internally, if checked is also set, warning is thrown

Warning: Checkbox contains an input of type checkbox with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components
at input
at eval (webpack-internal:///../../node_modules/react-daisyui/dist/react-daisyui.modern.js:4689:24)

Point of interest:

Suggestion: Don't set default value for defaultChecked or better yet, remove them both (leave it to {...props})

Using NavLink from react-router-dom with <DropDown.Item>, I would get this in the console

<a> cannot appear as a descendant of <a>.

Wondering if there's a way to use NavLink and DropDown.Item

Workaround:

  <li>
    <NavLink to={route}>{name}</NavLink>
  </li>

I have installed the package on a nextjs application (with nx).
I succeed to render a button just like in the quickstart of the readme.

But 2 seconds later, I have an error popping:

Server Error
Error: Cannot find module '/Users/user/Desktop/folder/node_modules/react/jsx-runtime' imported from /Users/user/Desktop/folder/node_modules/react-daisyui/dist/react-daisyui.modern.js
Did you mean to import react/jsx-runtime.js?

"daisyui": "^2.11.0",
"react-daisyui": "^1.7.1"

color prop only accepts primary, secondary, accent?

I've tried to create an Input with the following code:

              <Input
                type="date"
                {...register('expirationDate', { required: true })}
              />

What I get when the DOM renders is:

<input type="text" name="expirationDate" class="input focus:outline-offset-0 input-bordered" value="">

What I expected was:

<input type="date" name="expirationDate" class="input focus:outline-offset-0 input-bordered" value="">

I believe this line needs to be changed:
https://github.com/daisyui/react-daisyui/blob/main/src/Input/Input.tsx#L48

type={props.text}

Also, text shows up in the IDE auto-complete:

https://react.daisyui.com/ is down,

Getting this error

Error 1016 Ray ID: 71eadc6d8f098602 • 2022-06-21 06:59:21 UTC
Origin DNS error
What happened?
You've requested a page on a website (react.daisyui.com) that is on the Cloudflare network. Cloudflare is currently unable to resolve your requested domain (react.daisyui.com).

What can I do?
If you are a visitor of this website:
Please try again in a few minutes.

If you are the owner of this website:
Check your DNS settings. If you are using a CNAME origin record, make sure it is valid and resolvable. Additional troubleshooting information here.

Reproduction:
https://codesandbox.io/s/react-daisyui-example-forked-x46041?file=/src/App.tsx

Expected behavior (in plain HTML):
Should get the value attribute
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Actual result:
Getting the inner text of <Select.Option>INNER TEXT</Select.Option>

Related code:
The root cause should be the missing value prop here

Unit / Integration testing especially for all the stateful components

for now many front end libaray support Modularize Imports it will can reduce app bundle size, such as next.js, and so on. could you plan to support this?

Implement the <Chat> component added in daisyui 2.42: xhttps://daisyui.com/components/chat/

Tailwind is too slow with such a safelist pattern (advised on README.md), if I remove it I go from 2s compilation time to 300ms, and I have a 12 core processor (although I'm not sure if this is multi-threaded).

Any idea why this happens, and if we should simply add an exhaustive whitelist for daisy ?

Since the value of the select is stored in a local state of the Select component, any manual change of the value don't update the selected option.

Possbile fix (default react behavior):

1. Directly pass the value to the <select> tag
2. Rename initialValue in defaultValue and pass it directly in the html tag as well

So basically the code should look like this:

const SelectInner = <T extends string | number | undefined>(
  props: SelectProps<T>,
  ref: React.ForwardedRef<HTMLSelectElement>
): JSX.Element => {
  const {
    children,
    defaultValue,
    value,
    onChange,
    size,
    color,
    bordered = true,
    borderOffset,
    dataTheme,
    className,
    ...rest
  } = props

  const classes = twMerge(
    'select',
    className,
    clsx({
      [`select-${size}`]: size,
      [`select-${color}`]: color,
      [`focus:outline-offset-0`]: !borderOffset,
      'select-bordered': bordered,
    })
  )

  return (
    <select
      {...rest}
      ref={ref}
      data-theme={dataTheme}
      className={classes}
      onChange={(e) => onChange?.(e.currentTarget.value as T)}
      value={value}
      defaultValue ={defaultValue}
    >
      {children}
    </select>
  )
}

First of all, thank you for the react library :D

Having the react children within a label makes it impossible to create something like the following
.

Just deleting the label wrapper will make the component more extensible.
Also, a little suggestion: since the Icon is rendered as it is (with no manipulation) maybe there's no reason for the prop to exist (it can be passed as part of the children).

Component: Table
Issue: Table component not passing 'key' prop to children of lists

Currently the Table component is not passing the 'key' prop to its children that are returned by the array.map in Row, Footer and Head component.
This is causing client side warnings and possibly unnecessary rerenders of the children.

I've already written the fix for it but I do not have the rights to open a branch and push to this repository.
I could not find contributing guidelines but I'd be happy to contribute to this.

Currently, there's no example of Swap in storybook

Some of Storybook examples at which some additional property added don't show proper hierarchical component arguments.
The screenshots are the ones of CodeMockup > Highlighted Line

It should show the above whole code, which is just currently being passed as argument for component reusing.
It would be better if the whole code thing shows the contents.

I'd like to do some works for this if permitted :)

I´m trying to create a dropdown and set one item as active but I can't, I have to use Menu.Item with a div as child with 'active' class. I'd like to set 'active' as prop (No className)... Thank you

Issue:

If I try passing a custom classname, the Dropdown didn't pass/merge it with other classnames properly.

Example

Input

<Dropdown className="custom-classname" >

Expected output

<div role="listbox" class="dropdown custom-classname">

Actual output

<div role="listbox" class="dropdown">

Thanks for this amazing library ❤️

UPDATED: I misunderstand that it is an official library

I don't know how to use react-daisyui + daisyui + Tailwindcss in Next.js

When I try to use them, the CSS of daisyui is not loaded.

I found a tutorial before that I need to add 'node_modules/react-daisyui/dist/react-daisyui.cjs', to tailwind config content.

After doing that it works, but there are some problems.
The CSS of class btn-ghost is not loaded.

My code:

import { Button } from 'react-daisyui'

export default function Test() {
    return (
        <Button color="ghost">Test</Button>
    )
}

Hi 👋,

I'm experiencing erratic behavior with the Rating component.

The issue occurs locally and on the documentation site.

Repo of code with issue : https://github.com/arjunindia/fake-ecommerce-app
Vercel deploy: https://fake-ecommerce-app.vercel.app/

I may be doing something really silly here however I cannot get the collapse component working.

I am using NextJS 13 and the app directory to make use of server components.

This is my example component using Collapse

"use client";
import { useState } from "react";
import { Button, Collapse } from "react-daisyui";

// TODO: Create menu item type
const MenuItem = ({ item }: { item: any }) => {
  const [isOpen, setIsOpen] = useState(false);

  const {
    item_data: { name, variations },
  } = item;

  const handleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Button onClick={() => handleOpen()}>{isOpen ? "close" : "open"}</Button>
      <Collapse icon="arrow" open={isOpen} className="py-2">
        <Collapse.Title className="text-xl font-medium">{name}</Collapse.Title>
        <Collapse.Content>
          attribute is necessary to make the div focusable
        </Collapse.Content>
      </Collapse>
    </>
  );
};

export default MenuItem;

The component renders, but doesn't show the arrow icon and is always open, modifying the open state does nothing and even just seeing open={false} the component remains open. It's as if the JS for the component isn't running at all.

The handleOpen function is working as expected as upon clicking the open button it's text changes to close

Our current <Tabs> parent component maintains the active tab value in a useState and passes the value along to all of the child <Tab> components.

https://github.com/daisyui/react-daisyui/blob/main/src/Tabs/Tabs.tsx

However, this internal state-keeping causes problems when we attempt to control Tabs from the outside using the value prop. It would be more correct to call the value prop a defaultValue since useState does not reload the initial value from props on rerender.

The way I see it, there are couple ways forward with this:

1. Add a useEffect hook with a dependency on the value prop to update the internal state. (Not a huge fan of this solution)
2. Remove the internal state entirely, and let the user control the state themselves using the exposed onChange prop.

I'll leave the solution up to whoever wants to tackle this. Open to other ideas as well!

The positional classes are not being picked up from source files. Seems to be related to a change some time ago from safelisting every class to using content as per instrunction in the README file:

Line number 39 in Tooltip.tsx seems to be the problem; It is interpolating a class making tailwind unable to detect correctly.

Here is a print and a stackblitz link showing the problem:

Example on stackblitz

I would like to try and submit a pull request with a fix. But wanted to discuss a bit about the best path to take.

This problem may very well be affecting other components too. I just found a mention of it in issue #116

Currently there no choice to custom Button to be Link from react-router.

Expected like:
<Button component={<Link to='/somewhere' />} />

Include option to use svg in Avatar

Implement the <FileUpload> component added in daisyui 2.40: https://daisyui.com/components/file-input/

Feature Request:

• allow for tag prop ( or similar ) on Theme component so it can be rendered as an element other than div

Use Case:

<Theme tag="body" dataTheme="dark">
  <main>{children}</main>
</Theme>

Output:

<body data-theme="dark">
  <main>
    <div>Hello World</div>
  </main>
</body>

Will try to open a PR if space allows and this interests the team, but floating this idea up in the meantime.

Thanks for all the work on this, so awesome!

error - TypeError: React__default.default.createContext is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/react-daisyui/dist/react-daisyui.cjs:5586:60)
    at Object.(sc_server)/./node_modules/react-daisyui/dist/react-daisyui.cjs (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\app\page.js:1087:1)
    at __webpack_require__ (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./app/layout.tsx:7:71)
    at Object.(sc_server)/./app/layout.tsx (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\app\page.js:230:1)       
    at __webpack_require__ (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\.next\server\webpack-runtime.js:33:42)
    at Object.layout (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=C%3A%5CUsers%5Cbamas%5COneDrive%5CDocuments%5CMy%20Backups%5CDevelopment%5Cnodejs%5Cthewilsonnet.com%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=C%3A%5CUsers%5Cbamas%5COneDrive%5CDocuments%5CMy%20Backups%5CDevelopment%5Cnodejs%5Cthewilsonnet.com&isDev=true&tsconfigPath=tsconfig.json!:22:153)
    at Object.collectGenerateParams (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\node_modules\next\dist\build\utils.js:710:110)
    at Object.loadStaticPaths (C:\Users\bamas\OneDrive\Documents\My Backups\Development\nodejs\thewilsonnet.com\node_modules\next\dist\server\dev\static-paths-worker.js:43:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  type: 'TypeError',
  page: '/'
}

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    transpilePackages: ["react-daisyui"],
  },
};

module.exports = nextConfig;

Many of the Storybook stories feature components without backgrounds and the readability is very low. For example, our Collapse component:

Here's how the Collapse component (and all components) are displayed on the daisyUI site:

Readability seems generally better because the component itself is wrapped in the preview grid. I think it would be a good idea to wrap existing stories in a similar container to help clarify the distinction between components and the background.

Hi,i have an issue when using collapse (with checkbox) on mobile browser (chrome, safari)
Try this on mobile browser

Popups such as modals and dropdowns should use portals for the content to avoid problems with overflow: hidden or z-indexes.

Typings works perfectly if for example I include "react-daisy-ui" in a NextJS app.
But they are not working in a project where I am using ESM (I believe this is somehow the cause of the issue).

[1] TSError: ⨯ Unable to compile TypeScript:
[1] src/components/navigation.tsx(1,24): error TS7016: Could not find a declaration file for module 'react-daisyui'. '/users/<home>/mah-fastify/node_modules/react-daisyui/dist/react-daisyui.modern.js' implicitly has an 'any' type.

And of course I see that typings are present, so I don't really understand where the problem is coming from.
Do you have any idea?

im having an issue when im using prefix: 'tw-' in tailwind.config.js when i use the components from react-daisyui it wont add prefix on react-daisyui components any workaround?

I get the classic error Could not find a declaration file for module 'react-daisyui'

Version 2.4.4 works fine.

For built-in responsiveness we need to add an optional "responsive" prop (defaulted to true in Storybook) pre-baked with TailwindCSS breakpoints:

https://tailwindcss.com/docs/screens

Ultimately, users should implement their own sizing to suit their needs. However, at the moment many of our Storybook components are too large for the preview container on mobile and this doesn't give a good first impression for the library. Additionally, some users might not want to implement responsiveness themselves and would rather use a general purpose default option.

Adding the prop would look something like this:

1. Add responsive?: boolean to the IComponentBaseProps interface in types.ts (https://github.com/daisyui/react-daisyui/blob/main/src/types.ts) to make the prop available on all react-daisyUI components.
2. Include the responsive prop name when destructuring the component's Props type in it's definition
3. Using the clsx library, add sizing for the sm, md, and lg TailwindCSS breakpoints (or wherever applicable), set conditionally when responsive equals true. For example:

clsx({
    'm-2 sm:m-4 md:m-8 lg:m-16': responsive,
})

Possible solutions would be to move all component Storybook files to a separate folder and ignore it, or perhaps use pattern matching to exclude .stories.tsx files from the build.

Currently, if the href property is set to a Button component, the anchor element is used.
However, it is not possible to use anchor specific properties like rel or target.

A solution to multi-element components is to propose a property (react-bootstrap named it as, reactstrap named it tag) allowing to specify the type of element (in the case of the Button component, it would be either button or a). It is then possible to determine from the latter the properties specific to an element.

Hi,

Thanks for this project, is really cool, i have a problem with the nextjs integration, i've noticed the classes of the react components are not being scaned, becuase they're not being added to the global styles.css tailwind file, not static not jit, it seems that its because the component library is not being scanned for the new tailwind classes they need, ¿ any ideas ?

Thanks, Hans