Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート

5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。

Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。
Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。
このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。

主な更新点は以下の通りだ。

組み込みアンカーポジショニングのサポート
新しいチェックボックスコンポーネントの追加
HTMLフォームコンポーネントの拡充
状態検出の向上
コンボボックスリストの仮想化
新しいウェブサイトと改善されたドキュメント

組み込みアンカーポジショニングのサポート

Floating UIがHeadless UIに直接統合され、Menu、Popover、Combobox、Listboxコンポーネントに新しいanchorプロパティが追加された。以下はドロップダウンの位置調整例だ。

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
function Example() {
  return (
    <Menu>
      <MenuButton>Options</MenuButton>
      <MenuItems anchor="bottom start" className="[--anchor-gap:8px] [--anchor-padding:8px]">
        <MenuItem><button>Edit</button></MenuItem>
        <MenuItem><button>Duplicate</button></MenuItem>
        <hr />
        <MenuItem><button>Archive</button></MenuItem>
        <MenuItem><button>Delete</button></MenuItem>
      </MenuItems>
    </Menu>
  );
}

新しいチェックボックスコンポーネントの追加

新しいCheckboxコンポーネントは、完全にカスタム化可能で、HTMLフォームとの状態同期も容易に行える。以下はその使用例だ。

import { Field, Label, Checkbox } from '@headlessui/react';
import { CheckmarkIcon } from './icons/checkmark';
import clsx from 'clsx';
function Example() {
  return (
    <Field>
      <Checkbox defaultChecked className={clsx(
        'size-4 rounded border bg-white dark:bg-white/5',
        'data-[checked]:border-transparent data-[checked]:bg-blue-500',
        'focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
      )}>
        <CheckmarkIcon className="stroke-white opacity-0 group-data-[checked]:opacity-100" />
      </Checkbox>
      <div>
        <Label>Enable beta features</Label>
        <Description>This will give you early access to any awesome new features we're developing.</Description>
      </div>
    </Field>
  );
}

HTMLフォームコンポーネントの拡充

IDとaria-*属性の自動設定を行う新しいHTMLフォームコンポーネントが導入された。これにより、フォーム要素の関連付けが簡単になる。

import { Description, Field, Input, Label } from '@headlessui/react';
function Example() {
  return (
    <Field>
      <Label>Name</Label>
      <Input name="your_name" />
      <Description>Use your real name so people will recognize you.</Description>
    </Field>
  );
}

状態検出の向上

data-*属性を使用することで、hover、focus、active状態がデバイス間で一貫性を持って検出されるようになった。これにより、ネイティブのCSS疑似クラスよりも信頼性の高いスタイル適用が可能となる。

コンボボックスリストの仮想化

大量の項目を扱うコンボボックスのパフォーマンスを向上させるために、リストの仮想化がサポートされた。これにより、無限スクロールのような体験がスムーズに実現できる。

新しいウェブサイトと改善されたドキュメント

メジャーリリースに伴い、ドキュメントが全面的に見直され、ウェブサイトも新しいデザインに変わった。これにより、ユーザーはより快適に情報を得ることができる。
詳細はHeadless UI v2.0 for Reactを参照していただきたい。