A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Overview

Headless UI

A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.


Documentation

For full documentation, visit headlessui.dev.

Installing the latest version

You can install the latest version by using:

Installing the insiders version

You can install the insiders version (which points to whatever the latest commit on the main branch is) by using:

Note: The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.

Packages

Name Version Downloads
@headlessui/react npm version npm downloads
@headlessui/vue npm version npm downloads
@headlessui/tailwindcss npm version npm downloads

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Headless UI, please read our contributing docs before submitting a pull request.

Comments
  • [Bug]: Uncaught RangeError: Maximum call stack size exceeded. focusElement of Modal

    [Bug]: Uncaught RangeError: Maximum call stack size exceeded. focusElement of Modal

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    1.4.1

    What browser are you using?

    chrome

    Reproduction repository

    Not now.

    Describe your issue

    while we create Modal multiple (2+) it will throw me

    focus-management.esm.js?d1e3:99 Uncaught RangeError: Maximum call stack size exceeded.
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
        at handler (use-window-event.esm.js?b5e3:8)
        at focusElement (focus-management.esm.js?d1e3:99)
        at eval (use-focus-trap.esm.js?25af:110)
    

    Screenshot here

    BTW, can Modal need to provider flag props to disabled focusElement feature, in most case we don't need this, i think.

    opened by tianyingchun 33
  • Multi-Listbox

    Multi-Listbox

    Hey there,

    Just a first attempt/POC for a multi-select Listbox (see #181).

    React-only at this stage.

    https://user-images.githubusercontent.com/690667/123712986-af5edb00-d873-11eb-8085-10dbf11b9fc5.mov

    It involves a few changes, mostly:

    • Tracking the value in theListbox state, to be able to detect selected options while the Listbox is open
    • Checking here and there if value is an array
    • Focus handling

    All in all, it seems to work ok, the only thing I can't get around is that when you use clickable items within Listbox.button (ex: badges with a remove action), the button gain focus on click, and it kind of messes things up.

    I've added a basic test case - just a start.

    Let me know if you'd like me to explore / improve this further, or if you prefer to handle this yourself :)

    opened by pvanliefland 33
  • HeadlessUI is not working with Nuxt 3

    HeadlessUI is not working with Nuxt 3

    What package within Headless UI are you using?

    @headlessui/vue

    What version of that package are you using?

    "devDependencies": {
        "autoprefixer": "^10.4.0",
        "nuxt3": "latest",
        "postcss": "^8.4.4",
        "tailwindcss": "^2.2.19"
      },
      "dependencies": {
        "@headlessui/vue": "^1.4.2",
        "@heroicons/vue": "^1.0.5",
        "@tailwindcss/forms": "^0.3.4"
      }
    

    Describe your issue

    It works fine with development but when I build nuxt (nuxi build) and start (yarn start) it gives error. I've tried to import headless ui component from @headlessui/vue/dist/index.js instead of @headlessui/vue but its still same.

    TypeError: Cannot read property 'buttonRef' of undefined
        at setup (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2622:15)
        at callWithErrorHandling (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:7158:22)
        at setupStatefulComponent (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:6874:29)
        at setupComponent (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:6855:11)
        at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9757:17)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
        at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
        at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9860:17)
        at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
    [Vue warn]: inject() can only be used inside setup() or functional components.
    TypeError: Cannot read property 'menuState' of undefined
        at Proxy.render$1 (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2522:17)
        at renderComponentRoot (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:2015:44)
        at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:51)
        at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
        at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
        at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9860:17)
        at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
        at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
    [Vue warn]: inject() can only be used inside setup() or functional components.
    [Vue warn]: Unhandled error during execution of watcher callback
    TypeError: Cannot read property 'itemsRef' of undefined
        at ReactiveEffect.fn (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2685:24)
        at ReactiveEffect.run (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:164:29)
        at ComputedRefImpl.get value [as value] (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:1075:39)
        at D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2336:26
        at callWithErrorHandling (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6615:22)
        at callWithAsyncErrorHandling (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6624:21)
        at ReactiveEffect.getter [as fn] (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6970:24)
        at ReactiveEffect.run (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:164:29)
        at doWatch (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7078:16)
        at Object.watchEffect (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6890:12)
    [Vue warn]: inject() can only be used inside setup() or functional components.
    TypeError: Cannot read property 'menuState' of undefined
        at Proxy.render$1 (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2656:17)
        at renderComponentRoot (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:2015:44)
        at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:51)
        at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
        at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:13)
        at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
        at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
        at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9780:9)
        at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
    
    
    opened by bayramorhan 31
  • [Bug]: Dialog: There are no focusable elements inside the <FocusTrap />

    [Bug]: Dialog: There are no focusable elements inside the

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    1.0.0

    What browser are you using?

    Chrome

    Reproduction repository

    https://codesandbox.io/s/gallant-butterfly-wnxjb

    Description

    When there is no focusable element inside modal, it fails with error There are no focusable elements inside the <FocusTrap />. I don't know if it's a feature or a bug, but there isn't said in the documentation that Dialog must include at least one focusable element and I totally see a use-case when there are modals without any focusable element. I think it at least should fail with warning instead of fatal error.

    Anyways I would like to thank you for the great job you all are doing with the tailwind ecosystem, we really appreciate your work!

    opened by Krystofee 29
  • [Bug]: Interacting with third-party components that use portals inside a Dialog closes the Dialog

    [Bug]: Interacting with third-party components that use portals inside a Dialog closes the Dialog

    What package within Headless UI are you using?

    @headlessui/vue

    What version of that package are you using?

    1.0.0

    What browser are you using?

    Firefox

    Reproduction repository

    https://codesandbox.io/s/pensive-fast-yxokp?file=/src/App.vue

    Describe your issue

    When any component inside a Dialog renders itself elsewhere in the DOM using a Portal/Teleport, clicking in it closes the entire Dialog. The example above uses vue-flatpickr-component to create a date picker inside a modal, but because it renders the actual flatpickr instance somewhere else in the DOM, clicking any date closes the entire modal.

    The docs on this say:

    When a Dialog is rendered, clicking the DialogOverlay will close the Dialog.

    But that isn't exactly the case—it's not clicking the DialogOverlay specifically that closes the Dialog, but clicking anything that is not a child of the Dialog in the DOM.

    I believe the relevant part of the code is here: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L174-L184

    What do you think about adding a way to disable that global mousedown handler, or adding an option to actually only close the Dialog based on clicks directly on the DialogOverlay component?

    opened by bakerkretzmar 28
  • Transition not working in NextJs

    Transition not working in NextJs

    It appears like Transition classes are not there initially on any div(<Transition>) Btw I'm using ( tailwindcss(^1.8.4) , styled-components & twin-macro)

    Sample code I'm trying to test on my NextJs WebApp image

    bug 
    opened by puneetverma05 28
  • Regression: No transitions on open dialog [v1.6.5]

    Regression: No transitions on open dialog [v1.6.5]

    What package within Headless UI are you using?

    @headlessui/vue

    What version of that package are you using?

    1.6.5

    What browser are you using?

    Chrome

    Reproduction URL

    https://headlessui.dev/vue/dialog

    Describe your issue

    No transitions take place when dialog initially appears or after closing/opening it again. Transition on close seems to work though. It used to work in v1.6.4.

    Transition 
    opened by biesbjerg 27
  • [Bug]: Performance issues with Select Custom Dropdown on big lists

    [Bug]: Performance issues with Select Custom Dropdown on big lists

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    v1.1.1

    What browser are you using?

    Firefox

    Reproduction repository

    https://github.com/khuang7/headlessui-listbox-issue (yarn install then yarn start)

    Describe your issue

    I am trying to populate a pretty big list (500 elements) into the Simple Custom component found in TailwindUI for my project. The hover behavior when trying to select an option becomes quite slow when you try to move the mouse around on all the options. Also generating the list can sometimes be slow as well.

    My workaround this problem is to replace Listbox.Options and Listbox.Option to ul and li html elements so that I can just call 'hover:' on the li elements which improves performance significantly. But I would prefer to keep using the HeadlessUI instead of HTML because I would lose a lot of the ARIA accessibility features.

    I was wondering if there is a way to deal with the performance issues in the HeadlessUI. I could only pinpoint the issue being related to ListboxOptions and ListboxOption.

    opened by khuang7 27
  • Feature: close popover manually

    Feature: close popover manually

    What package within Headless UI are you using?

    @headlessui/vue

    What version of that package are you using?

    v1.0.0

    What browser are you using?

    Chrome

    Reproduction repository

    Describe your issue

    At the moment it is not possible to manually close the popover. Let's say I want to build an editable table. The editable content should be shown in the popover. When I hit the save button it should also close the popover. This is not possible, because the slots does not expose the function togglePopover.

    Needs more info 
    opened by psychonetic 26
  • Dialog throws error if there are no focusable elements

    Dialog throws error if there are no focusable elements

    I get the following error if I create a Dialog with no interactive components (just text): Error: There are no focusable elements inside the <FocusTrap />

    Needs more info 
    opened by pradyuman 26
  • Control whether Menu closes on Menu.Item click

    Control whether Menu closes on Menu.Item click

    Hi there! I have a use case for the Menu component where I don't necessarily want the Menu to close when I click on a Menu.Item. Or, in other words, I would like to be able to control when the menu closes in some way.

    Needs more info 
    opened by employee451 24
  • Dialog won't unmount when dismissed while mobile keyboard is open

    Dialog won't unmount when dismissed while mobile keyboard is open

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    v1.7.4

    What browser are you using?

    Android Brave Web Browser Application version: Brave 1.45.123, Chromium 107.0.5304.110 Operating System: Android 10; Build/QP1A. 190711.020

    Reproduction URL

    Codesandbox

    Describe your issue

    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: image

    And like this on mobile: image

    However, I found out that the dialog component doesn't unmount in this specific scenario that is VERY easy to trigger. This prevents the user from being able to interact with anything as the dialog component exists in the DOM but isn't visible in the viewport.

    Reproduction instructions:

    1. User is on mobile (VERY IMPORTANT). Use a mobile web browser, the devtools in desktop chromium doesn't simulate this bug
    2. User opens the dialog
    3. User focuses the textbox and the mobile keyboard is visible
    4. User then clicks the backdrop behind the dialog, dismissing the dialog. The user is performing this while the mobile keyboard is still active
    5. Dialog dismisses and transitions out of view. Though the component doesn't unmount and blocks any interaction on any components underneath (buttons, text inputs, etc).

    Video demonstration: https://youtube.com/shorts/Qhr1_azemaM?feature=share

    The actual result I want is when the user dismisses while the virtual keyboard is open, the dialog should transition out of view and unmount so that underlying elements can be interacted with.

    I have already asked about this problem, and there was a workaround (though really nasty workaround) suggested by a answerer on Stackoverflow. This workaround doesn't always work with 0 milliseconds. I have to set it to around 100+ milliseconds for the component to properly unmount in this very specific situation.

    opened by ericwang401 4
  • Transition with appear={true} using Next.js

    Transition with appear={true} using Next.js

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    v1.7.4

    What browser are you using?

    Google Chrome Version 107.0.5304.87 (Official Build) (64-bit)

    Reproduction URL

    repo: https://github.com/adjsky/headlessui-transition URL: https://headlessui-transition.vercel.app/

    Describe your issue

    The problem is described in this discussion: https://github.com/tailwindlabs/headlessui/discussions/2010 Transition on mount not working as expected using nextjs

    opened by adjsky 0
  • `Listbox` does not trigger a form's `onChange` when using React Hook Form's `Controller` (but native `select` does)

    `Listbox` does not trigger a form's `onChange` when using React Hook Form's `Controller` (but native `select` does)

    What package within Headless UI are you using?

    @headlessui/react

    What version of that package are you using?

    v1.7.4

    Reproduction URL

    https://codesandbox.io/s/rhf-onchange-with-headlessuis-listbox-ce917d?file=/src/App.tsx

    Describe your issue

    I am not sure if this is a Headless UI issue, but this is my best guess.

    Using the Listbox together with React Hook Form does not fire the form's onChange.

    Using a native select with the same setup does fire the onChange though, that's why I created the issue here and not in the RHF repo.


    In my reproduction you can see that the form is supposed to submit when the selection changes. Here, it logs to console, e.g.:

    image

    In the UI there are two selects: The first is via Listbox, the second is with a native select. When selecting an entry via Listbox, the value changes, but the form is not submitted (unexpected). When selecting an entry via the native select, the value changes and the form is submitted (as expected).

    Code for reference, see CodeSandbox for full code:

    function SelectNative({
      selected,
      onChange,
      name
    }: {
      selected: string;
      onChange: (newSelected: string) => void;
      name: string;
    }) {
      return (
        <select
          value={selected}
          onChange={(newSelected) => onChange(newSelected.currentTarget.value)}
          name={name}
        >
          {people.map((person) => (
            <option key={person.id} value={person.id}>
              {person.name}
            </option>
          ))}
        </select>
      );
    }
    
    function SelectWithListbox({
      selected,
      onChange,
      name
    }: {
      selected: string;
      onChange: (newSelected: string) => void;
      name: string;
    }) {
      return (
        <Listbox value={selected} onChange={onChange} name={name}>
          <Listbox.Button>
            {people.find((person) => person.id === selected)?.name}
          </Listbox.Button>
          <Listbox.Options>
            {people.map((person) => (
              <Listbox.Option key={person.id} value={person.id}>
                {person.name}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Listbox>
      );
    }
    
    opened by bennettdams 2
  • When opening a dialog in a full-screen iOS PWA, the recent change to iOS scroll locking causes an unexplainable gap

    When opening a dialog in a full-screen iOS PWA, the recent change to iOS scroll locking causes an unexplainable gap

    What package within Headless UI are you using?

    For example: @headlessui/vue

    What version of that package are you using?

    For example: v1.7.3

    What browser are you using?

    For example: Safari (iOS PWA Full Screen)

    Reproduction URL

    I can work on one if needed.

    Describe your issue

    When triggering a modal, HeadlessUI is setting position to fixed on <html>. For reasons I cannot understand, this triggers an unavoidable gap at the bottom of <html> between bottom: 0px; and the bottom of the screen.

    The blue box is a div that is position: absolute; and bottom: 0px.

    With html as position: fixed

    image

    With html as position: static

    image

    I've tried numerous things to try and remove the gap. The only thing that seems to work is set position: static !important; to <html> but that does also conflict with the scroll locking that HeadlessUI is trying to do.

    I've confirmed that rolling back to v1.7.0 stops setting position: fixed on <html> which removes this issue.

    opened by mehcode 1
  • combobox scroll handling is janky with virtual lists on first/last element

    combobox scroll handling is janky with virtual lists on first/last element

    What package within Headless UI are you using?

    Combobox component from @headlessui/react and @headlessui/vue

    What version of that package are you using?

    1.7.2

    What browser are you using?

    Firefox

    Reproduction URL

    https://github.com/stefanprobst/combobox

    Describe your issue

    When using a headlessui combobox with @tanstack/react-virtual, the scroll handling here seems to conflict with the virtual list, and leads to weird jankyness when trying to scroll the first or the last element in the list.

    In this video (from the reproduction repo), the mouse cursor is placed over the last element in the list, and is trying to scroll up

    https://user-images.githubusercontent.com/20753323/192153651-3512dd54-00e0-4a4e-ba65-0a14d35f9191.mp4

    Note that when scrolling fast enough (like at the end of the video) it is possible to "skip over" the issue.

    (I've run into the same issue with useVirtualList from @vueuse/core with @headlessui/vue)

    opened by stefanprobst 0
  • Slideover/Modal does not cover the full page if input is focused on Safari (iOS)

    Slideover/Modal does not cover the full page if input is focused on Safari (iOS)

    What package within Headless UI are you using?

    @headlessui/vue

    What version of that package are you using?

    v1.7.2

    What browser are you using?

    Safari

    Reproduction URL

    I used the code from "Wide create project form example" from tailwindui. As it's not free, I will not paste it here.

    Describe your issue

    If a slideover has an input, the height of the slideover is cropped if this input is focused. This does not happen on Safari on macOS, button Safari on iOS (I used Xcode's simulator to recreate the example I am attaching here).

    https://user-images.githubusercontent.com/23051150/191594958-927d2cb6-e31b-4148-b9d5-7d9616aafbc6.mp4

    Bildschirmfoto 2022-09-21 um 21 28 51@2x

    Needs more info 
    opened by ahoiroman 5
Releases(@headlessui/[email protected])
  • @headlessui/[email protected](Nov 3, 2022)

    Fixed

    • Expose close function for Menu and MenuItem components (#1897)
    • Fix useOutsideClick, add improvements for ShadowDOM (#1914)
    • Prevent default slot warning when using a component for as prop (#1915)
    • Fire <ComboboxInput>'s @change handler when changing the value internally (#1916)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Nov 3, 2022)

    Fixed

    • Fix <Popover.Button as={Fragment} /> crash (#1889)
    • Expose close function for Menu and Menu.Item components (#1897)
    • Fix useOutsideClick, add improvements for ShadowDOM (#1914)
    • Fire <Combobox.Input>'s onChange handler when changing the value internally (#1916)
    • Add client-only to mark everything as client components (#1981)

    Added

    • Warn when changing components between controlled and uncontrolled (#1878)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Sep 30, 2022)

    Fixed

    • Call displayValue with a v-model of ref(undefined) on ComboboxInput (#1865)
    • Improve Portal detection for Popover components (#1842)
    • Fix crash when children are undefined (#1885)
    • Fix useOutsideClick swallowing events inside ShadowDOM (#1876)
    • Fix Tab incorrectly activating on focus event (#1887)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Sep 30, 2022)

  • @headlessui/[email protected](Sep 15, 2022)

  • @headlessui/[email protected](Sep 15, 2022)

  • @headlessui/[email protected](Sep 12, 2022)

  • @headlessui/[email protected](Sep 12, 2022)

    Fixed

    • Improve iOS scroll locking (#1830)
    • Add <fieldset disabled> check to radio group options in React (#1835)
    • Ensure Tab order stays consistent, and the currently active Tab stays active (#1837)
    • Ensure Combobox.Label is properly linked when rendered after Combobox.Button and Combobox.Input components (#1838)
    • Remove forceRerender from Tab component (#1846)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Sep 6, 2022)

    Added

    • Add by prop for Listbox, Combobox and RadioGroup (#1482, #1717, #1814, #1815)
    • Make form components uncontrollable (#1683)
    • Add @headlessui/tailwindcss plugin (#1487)

    Fixed

    • Fixed SSR support on Deno (#1671)
    • Don’t close dialog when opened during mouse up event (#1667)
    • Don’t close dialog when drag ends outside dialog (#1667)
    • Fix outside clicks to close dialog when nested, unopened dialogs are present (#1667)
    • Close Menu component when using tab key (#1673)
    • Resync input when display value changes (#1679, #1755)
    • Ensure controlled Tabs don't change automagically (#1680)
    • Improve outside click on Safari iOS (#1712)
    • Improve event handler merging (#1715)
    • Fix incorrect scrolling to the bottom when opening a Dialog (#1716)
    • Don't overwrite element.focus() on <PopoverPanel> (#1719)
    • Improve Combobox re-opening keyboard issue on mobile (#1732)
    • Only select the active option when using "singular" mode when pressing <tab> in the Combobox component (#1750)
    • Only restore focus to the MenuButton if necessary when activating a MenuOption (#1782)
    • Don't scroll when wrapping around in focus trap (#1789)
    • Improve accessibility when announcing ListboxOption and ComboboxOption components (#1812)
    • Expose the value from the Combobox and Listbox components slot (#1822)
    • Improve scroll lock on iOS (#1824)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Sep 6, 2022)

  • @headlessui/[email protected](Sep 6, 2022)

    Added

    • Add by prop for Listbox, Combobox and RadioGroup (#1482, #1717, #1814, #1815)
    • Make form components uncontrollable (#1683)
    • Add @headlessui/tailwindcss plugin (#1487)

    Fixed

    • Fixed SSR support on Deno (#1671)
    • Don’t close dialog when opened during mouse up event (#1667)
    • Don’t close dialog when drag ends outside dialog (#1667)
    • Fix outside clicks to close dialog when nested, unopened dialogs are present (#1667)
    • Close Menu component when using tab key (#1673)
    • Resync input when display value changes (#1679, #1755)
    • Ensure controlled Tabs don't change automagically (#1680)
    • Don't scroll lock when a Transition + Dialog is mounted but hidden (#1681)
    • Allow Popover close to be passed directly to onClick handlers (#1696)
    • Improve outside click on Safari iOS (#1712)
    • Improve event handler merging (#1715)
    • Fix incorrect scrolling to the bottom when opening a Dialog (#1716)
    • Improve Combobox re-opening keyboard issue on mobile (#1732)
    • Ensure Disclosure.Panel is properly linked (#1747)
    • Only select the active option when using "singular" mode when pressing <tab> in the Combobox component (#1750)
    • Improve the types of the Combobox component (#1761)
    • Only restore focus to the Menu.Button if necessary when activating a Menu.Option (#1782)
    • Don't scroll when wrapping around in focus trap (#1789)
    • Fix Transition component's incorrect cleanup and order of events (#1803)
    • Ensure enter transitions work when using unmount={false} (#1811)
    • Improve accessibility when announcing Listbox.Option and Combobox.Option components (#1812)
    • Fix ref stealing from children (#1820)
    • Expose the value from the Combobox and Listbox components render prop (#1822)
    • Improve scroll lock on iOS (#1824)
    • Fix maximum call stack size exceeded error on Tab component when using as={Fragment} (#1826)
    • Fix "blank" screen on initial load of Transition component (#1823)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Jul 12, 2022)

  • @headlessui/[email protected](Jul 7, 2022)

  • @headlessui/[email protected](Jul 7, 2022)

  • @headlessui/[email protected](Jun 20, 2022)

    Fixed

    • Support <slot> children when using as="template" (#1548)
    • Improve outside click of Dialog component (#1546)
    • Detect outside clicks from within <iframe> elements (#1552)
    • Only render the Dialog on the client (#1566)
    • Improve Combobox input cursor position (#1574)
    • Fix scrolling issue in Tab component when using arrow keys (#1584)
    • Fix missing aria-expanded for ComboboxInput component (#1605)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Jun 20, 2022)

    Fixed

    • Fix incorrect transitionend/transitioncancel events for the Transition component (#1537)
    • Improve outside click of Dialog component (#1546)
    • Detect outside clicks from within <iframe> elements (#1552)
    • Improve Combobox input cursor position (#1574)
    • Fix scrolling issue in Tab component when using arrow keys (#1584)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](May 29, 2022)

  • @headlessui/[email protected](May 29, 2022)

  • @headlessui/[email protected](May 25, 2022)

  • @headlessui/[email protected](May 25, 2022)

    Fixed

    • Allow to override the type on the Combobox.Input (#1476)
    • Ensure the the <Popover.Panel focus> closes correctly (#1477)
    • Only render the FocusSentinel if required in the Tabs component (#1493)
    • Ensure the Transition stops once DOM Nodes are hidden (#1500)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](May 24, 2022)

  • @headlessui/[email protected](May 19, 2022)

    Fixed

    • Ensure DialogPanel exposes its ref (#1404)
    • Ignore Escape when event got prevented in Dialog component (#1424)
    • Improve FocusTrap behaviour (#1432)
    • Simplify Popover Tab logic by using sentinel nodes instead of keydown event interception (#1440)
    • Ensure the PopoverPanel is clickable without closing the Popover (#1443)
    • Improve "Scroll lock" scrollbar width for Dialog component (#1457)
    • Don’t throw when SSR rendering internal portals in Vue (#1459)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](May 19, 2022)

    Fixed

    • Fix closing of Popover.Panel in React 18 (#1409)
    • Ignore Escape when event got prevented in Dialog component (#1424)
    • Improve FocusTrap behaviour (#1432)
    • Simplify Popover Tab logic by using sentinel nodes instead of keydown event interception (#1440)
    • Ensure the Popover.Panel is clickable without closing the Popover (#1443)
    • Improve "Scroll lock" scrollbar width for Dialog component (#1457)
    • Make the ref optional in the Popover component (#1465)
    • Ensure the ref is forwarded on the Transition.Child component (#1473)
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](May 3, 2022)

  • @headlessui/[email protected](May 3, 2022)

  • @headlessui/[email protected](Apr 25, 2022)

    Fixed

    • Make sure that the input syncs when the combobox closes (#1137)
    • Ensure that you can close the Combobox initially (#1148)
    • Fix Dialog usage in Tab component (#1149)
    • Ensure links are triggered inside PopoverPanel components (#1153)
    • Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
    • Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
    • Improve outside click support (#1175)
    • Reset ComboboxInput when the value gets reset (#1181)
    • Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
    • Fix re-focusing element after close (#1186)
    • Fix Dialog cycling (#553)
    • Only activate the Tab on mouseup (#1192)
    • Ignore "outside click" on removed elements (#1193)
    • Remove focus() from Listbox.Option (#1218)
    • Improve some internal code (#1221)
    • Don't drop initial character when searching in Combobox (#1223)
    • Use ownerDocument instead of document (#1158)
    • Fix, re-expose el from each component (#1230)
    • Ensure focus trapping plays well with the Tab and Dialog components (#1231)
    • Improve syncing of ComboboxInput value (#1248)
    • Fix tree-shaking support (#1247)
    • Stop propagation on the PopoverButton (#1263)
    • Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
    • Mimic browser select on focus when navigating via Tab (#1272)
    • Resolve initialFocusRef correctly (#1276)
    • Ensure that there is always an active option in the Combobox (#1279, #1281)
    • Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
    • Fix nullable prop for Vue (2b109548b1a94a30858cf58c8f525554a1c12cbb)
    • Prefer incoming open prop over OpenClosed state (#1360)

    Added

    • Add classic form submission compatibility via new hidden inputs (#1214)
    • Add multiple value support to Listbox and Combobox components (#1243, #1355)
    • Add support for clearing the value of a Combobox (#1295)
    • Add DialogPanel to resolve issues when scrolling long dialogs that use DialogOverlay (#1333)

    Changes that might affect you

    Migrating from DialogOverlay to DialogPanel

    In previous versions of Headless UI, closing a dialog was handled by a click handler that lived on the DialogOverlay component, so as long as your overlay was rendered behind your panel, clicking outside the panel would close the dialog.

    This created an issue with scrollable dialogs, because it became easy to accidentally position your overlay on top of the scrollbar, which made it impossible to click the scrollbar without closing the dialog. You also couldn't scroll the dialog when your mouse was hovering over the overlay — only when your mouse was hovering over the actual panel.

    We've fixed this in Headless UI v1.6 by adding a dedicated DialogPanel component, and changing how "click outside" is handled. Now, if you're using a DialogPanel, the dialog is closed any time you click any element outside of it, rather than closing only when a DialogOverlay is explicitly clicked.

    If you're using DialogOverlay and not using DialogPanel, everything will continue to work exactly as it did before (including the bug I described above) to preserve backwards compatibility, but we highly encourage you to migrate to using DialogPanel, and to stop using DialogOverlay, instead using a simple div element:

      <Dialog
        :open="isOpen"
        @close="closeModal"
        class="fixed inset-0 flex items-center justify-center ..."
      >
    -   <DialogOverlay class="fixed inset-0 bg-black/25" />
    +   <div class="fixed inset-0 bg-black/25" />
      
    -   <div class="bg-white shadow-xl rounded-2xl ...">
    +   <DialogPanel class="bg-white shadow-xl rounded-2xl ...">
          <DialogTitle>Payment successful</DialogTitle>
          <!-- ... -->
    -   </div>
    +   </DialogPanel>
      </Dialog>
    

    Read through the updated Dialog documentation for more examples of using DialogPanel.

    Multiple value support for Listbox and Combobox

    If you have been using the insiders build for the new multiple value support for the Listbox and/or Combobox component, then you will have to add a new multiple prop to those components to tell the component that you are using multiple values. Previously this was automatically detected based on whether you were passing an array to the value prop or not.

    -  <Listbox v-model="selectedPeople" />
    +  <Listbox v-model="selectedPeople" multiple />
    
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Apr 25, 2022)

    Fixed

    • Ensure that you can add the ref prop to all components (#1116)
    • Ensure links are triggered inside Popover.Panel components (#1153)
    • Improve SSR for Tab component (#1155)
    • Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
    • Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
    • Fix <Transition> flickering issue (#1118)
    • Improve outside click support (#1175)
    • Ensure that appear prop on the <Transition> component works regardless of multiple rerenders (#1179)
    • Reset Combobox.Input when the value gets reset (#1181)
    • Fix double beforeEnter callback on the <Transition> component caused by SSR (#1183)
    • Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
    • Only activate the Tab on mouseup (#1192)
    • Ignore "outside click" on removed elements (#1193)
    • Remove focus() from Listbox.Option (#1218)
    • Improve some internal code (#1221)
    • Use ownerDocument instead of document (#1158)
    • Ensure focus trapping plays well with the Tab and Dialog components (#1231)
    • Improve syncing of Combobox.Input value (#1248)
    • Fix tree-shaking support (#1247)
    • Stop propagation on the Popover.Button (#1263)
    • Fix incorrect active option in the Listbox and Combobox components (#1264)
    • Properly merge incoming props (#1265)
    • Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
    • Mimic browser select on focus when navigating the Tab component (#1272)
    • Ensure that there is always an active option in the Combobox (#1279, #1281)
    • Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
    • Add React 18 compatibility (#1326)
    • Fix open/closed state issue in Dialog (#1360)

    Added

    • Add classic form submission compatibility via new hidden inputs (#1214)
    • Add multiple value support to Listbox and Combobox components (#1243, #1355)
    • Add support for clearing the value of a Combobox (#1295)
    • Add Dialog.Panel to resolve issues when scrolling long dialogs that use Dialog.Overlay (#1333)

    Changes that might affect you

    Migrating from Dialog.Overlay to Dialog.Panel

    In previous versions of Headless UI, closing a dialog was handled by a click handler that lived on the Dialog.Overlay component, so as long as your overlay was rendered behind your panel, clicking outside the panel would close the dialog.

    This created an issue with scrollable dialogs, because it became easy to accidentally position your overlay on top of the scrollbar, which made it impossible to click the scrollbar without closing the dialog. You also couldn't scroll the dialog when your mouse was hovering over the overlay — only when your mouse was hovering over the actual panel.

    We've fixed this in Headless UI v1.6 by adding a dedicated Dialog.Panel component, and changing how "click outside" is handled. Now, if you're using a Dialog.Panel, the dialog is closed any time you click any element outside of it, rather than closing only when a Dialog.Overlay is explicitly clicked.

    If you're using Dialog.Overlay and not using Dialog.Panel, everything will continue to work exactly as it did before (including the bug I described above) to preserve backwards compatibility, but we highly encourage you to migrate to using Dialog.Panel, and to stop using Dialog.Overlay, instead using a simple div element:

      <Dialog
        open={isOpen}
        onClose={closeModal}
        className="fixed inset-0 flex items-center justify-center ..."
      >
    -   <Dialog.Overlay className="fixed inset-0 bg-black/25" />
    +   <div className="fixed inset-0 bg-black/25" />
      
    -   <div className="bg-white shadow-xl rounded-2xl ...">
    +   <Dialog.Panel className="bg-white shadow-xl rounded-2xl ...">
          <Dialog.Title>Payment successful</Dialog.Title>
          {/* ... */}
    -   </div>
    +   </Dialog.Panel>
      </Dialog>
    

    Read through the updated Dialog documentation for more examples of using Dialog.Panel.

    Multiple value support for Listbox and Combobox

    If you have been using the insiders build for the new multiple value support for the Listbox and/or Combobox component, then you will have to add a new multiple prop to those components to tell the component that you are using multiple values. Previously this was automatically detected based on whether you were passing an array to the value prop or not.

    -  <Listbox value={selectedPeople} onChange={setSelectedPeople} />
    +  <Listbox value={selectedPeople} onChange={setSelectedPeople} multiple />
    
    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Feb 17, 2022)

  • @headlessui/[email protected](Feb 17, 2022)

    Fixed

    • Ensure correct order when conditionally rendering Menu.Item, Listbox.Option and RadioGroup.Option (#1045)
    • Improve controlled Tabs behaviour (#1050)
    • Improve typeahead search logic (#1051)
    • Improve overall codebase, use modern tech like esbuild and TypeScript 4! (#1055)
    • Improve build files (#1078)
    • Ensure typeahead stays on same item if it still matches (#1098)
    • Fix off-by-one frame issue causing flicker (#1111)
    • Trigger scrollIntoView effect when position changes (#1113)

    Added

    Source code(tar.gz)
    Source code(zip)
  • @headlessui/[email protected](Jan 14, 2022)

Owner
Tailwind Labs
Creators of Tailwind CSS and Headless UI, and authors of Refactoring UI.
Tailwind Labs
Modern UI Library that is beautifully designed and ready to use.

Jenika-UI Modern UI Library that is beautifully designed and build projects on top of that. Installation Install from your favourite package managers.

Anbuselvan Rocky 3 Sep 16, 2022
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 187 Nov 24, 2022
Tailwind CSS UI components build for Vue.js / Nuxt.js

mijin Tailwind CSS UI components build for Vue.js 2.x / Nuxt.js 2.x ?? Documentation Features ?? Component style relying uniquely on Tailwind CSS pres

Léonard Lecouey 179 Nov 26, 2022
⚡️ Build scalable and accessible Vue.js applications with ease.

Build scalable and accessible Vue.js applications with ease. @chakra-ui/vue gives you a set of accessible and composable Vue components that you can u

Chakra UI 1.6k Nov 25, 2022
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Nov 29, 2022
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Nov 22, 2022
Humans is designed for mobile and desktop for human users, To help developer to build UI quickly

Humans is designed for mobile and desktop for human users. And it is vue-based implementation. To help developer to build UI quickly.

freshes 14 Aug 9, 2021
Hippy is designed for developers to easily build cross-platform and high-performance awesome apps. 👏

Hippy is a cross-platform development framework, that aims to help developers write once, and run on multiple platforms(iOS, Android, Web, and so on). Hippy is quite friendly to Web developers, especially those who are familiar with React or Vue. With Hippy, developers can create the cross-platform app easily.

Tencent 6.9k Nov 28, 2022
Translate Bulma css api to vue components

vue-bulma-components The goal of this library is to use the bulma class syntax as components and props. 3kb minified Demo and try the live demo too :)

null 159 Sep 7, 2022
🐛 Oruga is a lightweight library of UI components without CSS framework dependency

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly ( ?? ) => ?? Oruga is a lightweight library

Oruga 870 Nov 24, 2022
Lotrek UI - A collection of ready-to-use UI components written in HTML & CSS

Lotrek UI Lotrek UI is a collection of ready-to-use UI components and micro layouts written in simple HTML & CSS to help you build awesome stuff faste

Lotrèk 6 Mar 15, 2022
Vue components built for Nuxt3|Vue3 powered by Windi CSS|tailwindcss

Vue components built for Vue3 powered by Windi CSS or tailwindcss ?? Features ?? All components and classes include dark-mode support ?? Programmatic

Fume 67 Nov 23, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 860 Nov 23, 2022
Most complete implementation of Spectre.css on Vue.js

A Lightweight, Simple and Responsive Component Framework Vectre is a set of lightweight, simple and responsive Vue components based on Spectre CSS Fea

null 64 Oct 16, 2022
Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Buefy 9.3k Nov 29, 2022
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 309 Oct 7, 2022
UI Components for Vue

VueFace VueFace is an open source component library for VueJS framework with around 40 components at the moment. It supports 20+ themes for giving dif

Sudheer Jonna 77 Nov 19, 2022
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop

vueComponent 17.4k Nov 22, 2022