Headless UI All In One

Headless UI All In One

Headless UI is an unstyled component library for either React.js or Vue.js from the same people that created Tailwind CSS.

https://www.wappalyzer.com/technologies/ui-frameworks/headless-ui

Headless UI

Unstyled, fully accessible UI components

https://headlessui.com/

17.4k stars
165 watching
686 forks

https://github.com/tailwindlabs/headlessui

demos

Switch (Toggle)

$ npm install @headlessui/react

https://headlessui.com/react/switch

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 h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out 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] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
        />
      </Switch>
    </div>
  )
}

refs

Tailwind CSS

A Utility-First CSS Framework for Rapidly Building Custom Designs

https://tailwindcss.com/

https://github.com/tailwindlabs/tailwindcss

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---