Stack Overflow
Stack Overflow

Questions tagged [headless-ui]

Headless UI – Unstyled, fully accessible UI components

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. React Vue. Menu (Dropdown) · Listbox (Select).

https://headlessui.dev

154 questions
11
votes
2 answers

Tailwindcss show/hide transition

I'm making a react app with tailwindcss, and I want to make a hidden mobile navbar and when the user click on the icon it appears. So I want to make a transition while the menu appears. I use: React Tailwindcss Headlessui My…
M7md-Dev
  • 163
  • 1
  • 1
  • 13
11
votes
12 answers

Don't close Dialog(Modal) when click outside in React & HeadlessUI

my problem is simple ... I'm using HeadlessUI's Dialog component for React in my app and when I click out of modal I wish it wouldn't close. In the documentation, there is the Dialog. Overlay parameter that deals with this interaction but there are…
Salvatore Marotta
  • 111
  • 1
  • 1
  • 6
9
votes
1 answer

Headless UI Transition.child errors to "Did you forget to passthrough the `ref` to the actual DOM node"

I'm building a sidebar with the Transition and Dialog Headless UI components. Transition docs When I break out the code that's passed between to it's own component. I get this error: Unhandled Runtime Error Error: Did you forget…
octavemirbeau
  • 481
  • 6
  • 19
9
votes
1 answer

Headless UI open one of the Disclosure's on init

I'm having trouble opening one of the 2 Disclosure. Attached below is what trying to achieve this and when I add the static prop it keeps it open indefinitely.
Ishai A.
  • 103
  • 1
  • 6
8
votes
2 answers

tailwind css first-child and last-child

can you guys help me with this problem I am having with first-child and last-child while using tailwind css. I have been debugging but cannot see the problem. Here is what the radio buttons look like So, basically I have a radio button group which…
coldhands
  • 327
  • 1
  • 3
  • 13
7
votes
3 answers

Components importing HeadlessUI throwing errors when built and then used in another project

I am currently developing a UI Library using React, Tailwind, HeadlessUI and Storybook. Once I finished the components, and made sure that they worked in Storybook and on a react dev server, I built them and packaged them into a private npm…
phil-not-funny
  • 93
  • 1
  • 7
7
votes
4 answers

Group Disclosures (Accordian) from Headless UI

I've just started using Headless UI. I'm trying to use the Disclosure component from Headless UI to render my job experiences. Basically, I need "n" number of Disclosures which will be dynamically rendered and whenever one Disclosure is opened the…
Jerome Marshall
  • 323
  • 1
  • 4
  • 14
6
votes
1 answer

In @headlessui/react, how do you mock the animations of Dialog and Transition components?

In my Jest tests, I'd like to mock the animations of the Transition and Dialog components of @headlessui/react to speed up my tests. I currently just resort to await screen.findBy's to wait for the animations to end but test suite runtime is…
neldeles
  • 588
  • 1
  • 5
  • 12
5
votes
2 answers

How to use register from react-hook-forms with Headless UI Combobox

I have this piece of code where I am trying to wire up the Combobox Component from Headless UI with react-hook-form. Whenever I try to enter a different value and select a different option it gives me an error saying - Cannot read properties of…
Nilan Saha
  • 191
  • 1
  • 9
5
votes
2 answers

Changing Popover internal state - Headless UI

How do i change the internal state of the Popover with a function outside the component: Like the openPopover function i created below. const openPopover = () => { setPopoverOpen(true) // Example.. } {({open}: {open: boolean}) => { …
haveman
  • 311
  • 1
  • 3
  • 13
5
votes
1 answer

Can't make the headlessui dropdown to open on mouse hover and not on click

I build an app in React and I have this dropdown from Tailwind UI which is opened on click events and I want to make it open on mouse hover too.
SnNaCk
  • 2,370
  • 2
  • 5
  • 16
5
votes
3 answers

Error while importing component from library

I'm working on this component library that uses tsdx, all of the components work fine except for this one. It's a dialog that uses the @headlessui/react lib, and it's Dialog component. It's exported like this: DialogBase.Content =…
David Díaz
  • 89
  • 4
  • 15
5
votes
3 answers

How to collapse Siblings with Headless UI

To make the accordion component with Headless UI, I have used Disclosure component. But I have a problem to control the collapse/expand state for it's siblings. So, I want to close other siblings when I open one, but Disclosure component is only…
Satel
  • 169
  • 1
  • 9
5
votes
1 answer

Updating Formik State whilst using Headless UI "Listbox" (which manages its own state, internally)

I'm struggling to get a Headless UI Listbox implementation working successfully with Formik. After reading all the docs and scouring StackOverflow, I'm yet to find an answer. I can get the Listbox to function perfectly well on its own, and Formik…
lc-51
  • 99
  • 2
  • 7
4
votes
1 answer

How to make smooth fade-in transition with tailwind HeadlessUI

I have a simple HeadlessUI Tab component like the one below. import { Tab } from '@headlessui/react' function MyTabs() { return ( Tab 1 Tab 2 Tab 3 …
husky
  • 831
  • 3
  • 10
  • 24
1
2 3
…
10 11