Independent reviews. IonBin has no partnerships with the tools on this page and was not paid for these listings. Our evaluations are our own, based on public documentation and our research. Product names are trademarks of their owners and are used for identification only. How disclosure works.

Components / Unstyled React and Vue components

Headless UI

Add familiar interaction patterns while keeping control of the visual design.

Documentation reviewed

Source review

What this status means

Understand the resource

What it is.

Headless UI provides unstyled components maintained by Tailwind Labs. The React and Vue documentation are distinct; this evaluation used the React Switch example. Components expose interaction state for styling, so Tailwind can be convenient without being a substitute for application logic.

When it is useful

It is a practical fit for a team already comfortable with utility-based styling that needs menus, dialogs or switches without adopting a complete visual system. Check the component set and framework version before standardizing on it.

A proposed application

Put it to work.

This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.

Try this

Proposed workflow: build a notification-preferences panel with separately labelled switches for reminders and review updates. Keep local edits reversible until the user saves, show a failure message if persistence fails, and avoid presenting a successful toggle as proof that the server accepted it. The executed sample only toggled an in-memory Switch.

Result to aim for

A consistent preferences panel with visible local state and a separate, testable persistence step.

Before you start

What you need.

  • Choose the React or Vue package and use the matching documentation. The @headlessui/react registry snapshot was 2.2.10, with React 18 or 19 peers.
  • Your own styles, meaningful labels and application behavior. The inspected package is MIT licensed; no account is required to use the open-source components.

The practical boundaries

What to watch for.

  • The hosted React demo runs in an iframe; a successful parent documentation page does not by itself verify the component.
  • The disabled selector inspected only the parent document and matched no control. Disabled behavior inside the Switch iframe remains untested.
  • Repository popularity does not establish current growth. Its latest recorded commit in this snapshot was April 2026.

Review record

What we could establish.

  • Why included (2026-10-19): Provides an established comparison point for unstyled React/Vue controls; included for adoption and fit, not claimed as a new trending release. GitHub reported 28,783 stars for the upstream repository (tailwindlabs/headlessui); the sampled default-branch commit is dated 2026-04-13. This is a dated popularity/activity snapshot, not a measured growth rate or safety ranking.
  • Public official documentation and declared package requirements reviewed. The example above is a proposed workflow; executed checks are listed separately below.
  • Earlier selector, focus-timing and setup probes remain in the retained evidence. Final conclusions use the corrected bounded tests and keep unmet coverage explicit.
Source coverage and runtime coverage are separate

The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.

Check current access, terms, licensing and data handling before using a resource with your own material.

Runtime and security evaluation

What the evaluation covers.

Bounded runtime checkedAccount-free ·

Inside the official React example iframe, Space and pointer clicks toggled the Switch and restored its initial state. The disabled-control selector searched only the parent document and matched no control; iframe disabled behavior remains untested. This unmet check is a harness coverage gap, not a product defect finding.

Methods: Public HTTP response · Public browser sample. A completed check covers the stated sample; it is not a safety certification.

Target
https://headlessui.com/react/switch
Version or capture
Unversioned public demo observed 2026-10-19; registry snapshot @headlessui/react 2.2.10 was not locally executed.
Integrity scope
Public document SHA-256 45a00f702037b4e21f107a3a7eca3eee0b93cea346ff6cbe91f26e385d764900; initial response only, not complete application integrity. Source snapshot eea57cf46fd6767ed1059012f7073b88eb159fba does not identify the hosted deployment.

Test conditions

  • Chrome 155.0.8059.82, 1280 x 900 desktop viewport; UTC browser context.
  • Fresh temporary browser profile and context; no inherited account storage. Child environment allowed only runtime paths, with credential variables omitted.
  • Public HTTPS GET/HEAD only; form submission, non-read methods, WebSockets, service workers and downloads blocked. Selected telemetry requests were blocked.

Individual checks and observations

  1. Public sample response

    pass

    Public HTTP response: Anonymous public GET; capture status, response-body hash and selected headers.

    Observed: HTTP 200; https://headlessui.com/react/switch. Reachability only.

  2. Keyboard selection cycle

    pass

    Public browser sample: Focus the first documented checkbox/switch; press Space twice and inspect its checked state.

    Observed: Checked false -> true -> false. No external form submitted.

  3. Pointer selection cycle

    pass

    Public browser sample: Click the same sample control twice and inspect state restoration.

    Observed: Pointer toggled state=true; original state restored=true.

  4. Disabled sample coverage

    fail

    Public browser sample: Search the parent document for a disabled control; the selector did not enter the Switch example iframe.

    Observed: The parent-document selector matched no disabled control. The working Switch was inside an iframe, which this disabled selector did not inspect. Iframe disabled behavior remains untested; this is a harness coverage gap, not an established product defect.

Security findings and boundaries

Passive inspection of official public response headers and request hosts, declared package metadata, and the exact local fixture where stated. No exploitation, authentication, private input or backend writes.

Practical advice · caution

A switch cannot confirm a saved preference

Treat an optimistic UI change and a server-accepted preference as separate states. Add failure handling and server-side permission checks when connecting the component to an account.

Observed · info

Sampled response and request surface

The anonymous HTTPS demo response included strict-transport-security. Requests attempted 2 additional host(s), including static.cloudflareinsights.com, rsms.me. The guard blocked 2 request(s). Host attempts include blocked requests; this does not establish retained data or exploit resistance.

Practical advice · caution

Check the installed dependency graph separately

The registry snapshot identifies @headlessui/react 2.2.10, but this review did not install or audit it. Lock and review the versions that actually enter your application; the hosted demo's success is not a dependency audit.

Practical caveats

  • The hosted React demo runs in an iframe; a successful parent documentation page does not by itself verify the component.
  • The disabled selector inspected only the parent document and matched no control. Disabled behavior inside the Switch iframe remains untested.
  • Repository popularity does not establish current growth. Its latest recorded commit in this snapshot was April 2026.

What remains untested

  • Only one React Switch was exercised; Vue, dialogs, menus, SSR and package integration were not tested.
  • The parent-document disabled probe establishes a harness coverage gap only; it did not inspect disabled controls inside the example iframe. No account, preference save or backend permission was tested.

Security limits

  • No authentication, authorization, tenant isolation, retention or backend processing was tested.
  • No comprehensive source/dependency audit, vulnerability scan or security certification. Header presence or absence describes one response, not the safety of a product.
  • Request guards can alter normal page behavior. Full browser, mobile, assistive-technology and performance coverage is outside this evaluation.

Evaluation sources

  1. Official evaluated sample
  2. Upstream repository
  3. GitHub repository snapshot endpoint

    Star count and repository identity observed 2026-10-19.

  4. Sampled source revision

    Default branch snapshot; not a claim that the hosted demo deploys this exact commit.

  5. Package manifest snapshot

    Exact registry version and dependency/license declaration; installed only where the evaluation says so.

  6. Official isolated React Switch demo

Download this evaluation record (JSON)

Follow the evidence

Sources and further reading.

  1. Official evaluated sample
  2. Upstream repository
  3. GitHub repository snapshot endpoint

    Star count and repository identity observed 2026-10-19.

  4. Sampled source revision

    Default branch snapshot; not a claim that the hosted demo deploys this exact commit.

  5. Package manifest snapshot

    Exact registry version and dependency/license declaration; installed only where the evaluation says so.

  6. Official isolated React Switch demo

Keep exploring

More in components.

View category

Documentation reviewed

shadcn/ui

Build an owned component layer with documented starting patterns.

Documentation reviewed

coss ui

Start from Base UI-backed product components.

Documentation reviewed

ReUI

Use documented patterns for dense product interfaces.