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).
Questions tagged [headless-ui]
154 questions
0
votes
1 answer
Using HeadlessUI Menu with Vue-Router
I am trying to use a HealdessUI menu component together with vue-router. I could find a way to make this work. It seems, that HeadlessUI only works with Links as a sting. But I need to use something like this this.$router.push({ name: item.href,…
foofourtyone
- 35
- 6
0
votes
1 answer
Error when adding Headless-ui in a Deno+Fresh Project
I have a Deno+Fresh project and when adding headlessui to my Fresh projec I get the following error:
TypeError: Cannot read properties of undefined (reading '__H')
I read the following discussion that apparently addresses my issue...…
Vicens Fayos
- 740
- 1
- 5
- 18
0
votes
0 answers
How to render inovua/reactdatagrid inside a div with absolute position?
I am trying to render inovua/reactdatagrid inside the popover component of headless-ui that has absolute position, which is not working.
I tried to use a separate div to render the grid but it does not show up on ui, if the div has absolute or fixed…
Sumit Khaitan
- 1
- 1
0
votes
0 answers
Smooth transition between state styles of Headless UI Radio Group options
I'm using Tailwind and the Radio Group component from Headless UI. By default, the transition between checked and unchecked styles is happening instantly with no animation. I'd like to add a smooth transition between the two states.
Normally I do…
mbaytas
- 2,676
- 7
- 26
- 37
0
votes
0 answers
NextJS click on button within HeadlessUI Disclosure based on hash
I have tried several approaches, but it seems like I don't understand something or missing something else.
The idea: I have a navbar with some URLs that contain a hash, and upon click I'd like the one with the same data-id attribute to open.
const…
Rob Csaszar
- 43
- 10
0
votes
1 answer
Dialog won't unmount when dismissed while mobile keyboard is open
I'm using React, TailwindCSS, and HeadlessUI by TailwindLabs.
I'm trying to make a dialog using the Headless UI Dialog component and the Transition component so that the dialog looks like this on desktop:
And like this on mobile:
However, I found…
Eric Wang
- 419
- 2
- 6
- 23
0
votes
0 answers
How to configure duration in Vue 3 HeadlessUI transition effect
I am attempting to set up slot machine-style animation using Vue 3 with TailwindCSS and HeadlessUI. So far, I was able to set up my UI so that slot machine numbers drop in from the top and drop out the bottom based on cycles handled by a for-loop.…
JS_is_awesome18
- 1,587
- 7
- 23
- 67
0
votes
1 answer
How to use as="template" in Vue 3 HeadlessUI TransitionRoot
I am attempting to set up slot machine-style animation using Vue 3 TailwindCSS and HeadlessUI. So far, I have a basic green square set up to slide in from top and slide out the bottom based on cycles in a for-loop called when clicking the "click to…
JS_is_awesome18
- 1,587
- 7
- 23
- 67
0
votes
0 answers
Vue 3 Typescript Vite TailwindUi build gives Duplicate key "pointer-events-none"
Upon running "vite build" i get what i assume is a warning (its in orange text) that looks like this:
transforming (67) node_modules/@headlessui/vue/dist/internal/portal-force-root.js[plugin:vite:esbuild] Duplicate key "pointer-events-none" in…
Stark
- 444
- 5
- 15
0
votes
0 answers
How to have nested lists using Headless UI in React
I'm trying to create a drop-down autocomplete search input using Headless UI in react.
My data in the JSON file is nested as follows:
{
"Java": [
{
"course_number": "Java101",
"course_title": "Introduction to…
0
votes
0 answers
Opening Modal Dialog in the test (vue-test-utils + jest-cucumber)
I have a test that simulates the opening of a Modal (HeadlessUI), however, when performing the simulation of clicking the open button, the modal does not open. It just stays:
sfn
- 263
- 1
- 2
- 13
0
votes
0 answers
ui headless radio-group as button group using flex box
I'm trying to use ui headless radio-group
as button group so I want all my button
in a single column and multiple rows
but with this code
…
user3887366
- 2,226
- 4
- 28
- 41
0
votes
0 answers
React Headless UI Spin Transition Night Theme Toggle
I've been trying to make a spin animation for my night and sun icon when toggled but I just can't figure it out. I'm using Nextjs, Tailwind, and Headless UI for the animation library. I feel like I'm close any help would be very much appreciated.…
xilaluna
- 47
- 5
0
votes
2 answers
How to use FontAwesome icons as component within a const using Tailwind in Vue?
I've been using Heroicons but due to it's lack of icons, I decided to switch to FontAwesome. I set it up and am able to use it like so
Marry Jane
- 305
- 2
- 15
0
votes
1 answer
How to Open Dialog Component from Parent?
I need to be able to open a Headless UI Dialog component from its parent. How do I accomplish this?
Jacob Graf
- 323
- 1
- 9