stackcrawler
Headless UI logo

Headless UI Detector

Check any public website to see whether it uses Headless UI.

Public signal scan
Fast lookup
No signup required

Scan a website

Enter a URL and Stackcrawler will inspect public technology signals.

Websites using Headless UI

Browse real website examples detected with Headless UI.

View examples

More CSS Frameworks detectors

Compare related tools and identify the wider stack behind a website.

Browse detectors

What we check

Stackcrawler looks for public page markers, scripts, platform fingerprints, metadata, and other visible implementation clues.

How can you detect if a website uses Headless UI?

Detecting if a website employs Headless UI can be done by looking for specific markers in the website’s source code, as well as examining certain characteristics typical of websites using this library.

Here’s a step-by-step guide on how to do it:

  1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page source code.
  2. Search for Headless UI Indicators: Use Ctrl+F (Windows) or Cmd+F (Mac) to search the page source for the term headlessui. This could appear in different forms, such as:
    • headlessui/react: Indicates the use of Headless UI with React.
    • headlessui/vue: Indicates the use of Headless UI with Vue.
  3. Check for Common Headless UI Components: Look for components specific to Headless UI such as:
    • <Menu>: Part of the Headless UI library for dropdown functionality.
    • <Disclosure>: Used for toggling visibility.
    • <Transition>: For adding transition effects.
    This can be done by searching for the component names using the same Ctrl+F or Cmd+F technique.
  4. Inspect JavaScript Files: Headless UI’s JavaScript files may be included in the project. Search for references in the page source, looking for patterns like:
    • headlessui: This may appear as a part of the script source URL, e.g., <script src="https://unpkg.com/@headlessui/react@latest">
  5. Examine Component Structure: If possible, inspect the webpage elements (using right-click > “Inspect” or F12) to see if the elements match common Headless UI patterns, like custom attributes or class names specific to Headless UI components.
  6. Review the Dependency List (for React/Vue applications): If you have access to the website’s repository (e.g., GitHub), check the package.json file for dependencies. Look for:
    • @headlessui/react
    • @headlessui/vue
  7. Inspect for Accessibility Features: Headless UI is designed with accessibility in mind. Check if the components use ARIA attributes properly. Use tools like the Accessibility Checker or the “Elements” tab in developer tools to verify ARIA attributes like aria-expanded or role being correctly implemented.