# Short benchmark on [Headless UI](https://headlessui.dev/)

Positive feedback:
- Good looking docs
- Accessibility notes & When to use sections on each component's page
- Nice separation between unstyled (component page) and styled examples
- Support for React & Vue

Negative feedback:
- Small set of components supported
- Circular nagivation not implemented on Menus (this was the first things from accessibility point of view that I tried)
- A bit off name for the Disclosure component
- Examples are too long and hard to be implementd without coping. For example, the simples component - Checkbox, requires ~20 lines of code, as well as knowledge about different details, like screen-reader only texts. In my experience the less code developers should write, the better as writing things over and over is much more prone to errors.

import { useState } from "react";
import { Switch } from "@headlessui/react";

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

  return (
    <div className="py-16">
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${enabled ? "bg-teal-900" : "bg-teal-700"}
          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 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] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
        />
      </Switch>
    </div>
  );
}

- Lost of the components are implemented to support `children` as function, which I don't think it's the best API there is.

Another notes:

It's really great how they talk about the component great deal, and then link to the styled examples, probably this is a good way of how we can document the components once we have the `unstyled` package.