Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@headlessui/react

Package Overview
Dependencies
Maintainers
0
Versions
730
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@headlessui/react

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

  • 0.0.0-insiders.3224a9e
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2M
decreased by-7.38%
Maintainers
0
Weekly downloads
 
Created

What is @headlessui/react?

The @headlessui/react package provides a set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS, for React projects. It allows developers to build fully accessible UI components without having to design the visual part from scratch, focusing instead on functionality and accessibility.

What are @headlessui/react's main functionalities?

Dropdown Menu

This feature allows developers to create a dropdown menu with accessible interactions. The example shows a basic dropdown menu with two options, highlighting the active option.

import { Menu } from '@headlessui/react';

<Menu>
  <Menu.Button>More</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/account-settings"
        >
          Account settings
        </a>
      )}
    </Menu.Item>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/sign-out"
        >
          Sign out
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Dialog (Modal)

This feature enables the creation of a dialog (modal) component. The example demonstrates how to use the Dialog component to create a modal that can be opened, closed, and contains accessible titles and descriptions.

import { Dialog } from '@headlessui/react';
import { useState } from 'react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>

      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <Dialog.Overlay />

        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog>
    </>
  );
}

Other packages similar to @headlessui/react

FAQs

Package last updated on 26 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc