Not working with next js

[Hafiz-Waqar]

I tried it with next js but it is not working

[andrepichardo]

Try again this:

To get started, install Headless UI via npm:

npm install @headlessui/react

Now, try the next code using the Switch component from headlessUI (or any component you'd like to test). Make sure you've installed TailwindCSS as well.

import { useState } from 'react'
import { Switch } from '@headlessui/react'

export default function ToggleExample() {
  const [enabled, setEnabled] = useState(false)

  return (
    <div className="flex items-center justify-center py-16">
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${enabled ? 'bg-teal-900' : 'bg-teal-700'}
          relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
      >
        <span className="sr-only">Use setting</span>
        <span
          aria-hidden="true"
          className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
            pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
        />
      </Switch>
    </div>
  )
}

Run the server
npm run dev

[punjasin]

it not working look like css is not loading do you know how to use it with nextjs 13.4

[rockyandtheblock]

I have run into the same issue in Next.js 13.0.3 and the latest version of HeadlessUI + TailwindCSS. Components imported from HeadlessUI will not render the wrappers like "Transition" or "Dialog" etc. The way to fix it is to mark any component with state as 'use client' for every parent and child component that involves state. Hope that helps.

[SunD004]

not working use client on all files use headless ui. actually the dialog don't display like the headluiss doc. seem like the css of the lib is not injected sometime.