Catalyst のご紹介: React 向けのモダンな UI キット

本日、ついに Catalyst の最初の開発プレビュー版を公開しました。ホリデーシーズンのハッキングセッションに間に合いました。

Overview of components included in Catalyst

Catalyst は、初の完全コンポーネント化され、必要なものがすべて含まれたアプリケーション UI キットです。実際のアプリケーションと同じように、実際のコンポーネントアーキテクチャを構築するために、互いに連携する、思慮深く設計された API を備えた、本物の React コンポーネントです。

ライブデモをご覧になり、ドキュメントをお読みください。Tailwind UI All-Access のお客様は、ダウンロードして、今日の新しいプロジェクトでお試しください。

Catalyst は現在開発プレビュー版です。今後さらに多くの機能が追加される予定ですが、本日リリースしたのは、皆様がすぐに触っていただき、私たちが新しいコンポーネントを構築し、より良い体験を提供する方法を見つけ続けることができるようにするためです。

あなたのコンポーネント、私たちのものではありません

Catalyst を使用して、私たちは、将来の Stripe や Linear が自社製品の構築に使用することを快く感じるような UI キットを構築することを目指しました。UI コンポーネントを所有したいと考えており、既製のライブラリを決して選択しない、デザインにこだわるチーム向けです。

そのため、インストールする依存関係ではなく、ソースをダウンロードして、コンポーネントを自分のプロジェクトにコピーします。そこでコンポーネントは、独自のコンポーネントシステムの出発点になります。

ボタンの border radius を変更したいですか？ button.tsx を開いて、いくつかのクラスを変更するだけです。GitHub issue を開いて、新しい構成オプションを公開するように私たちを説得する必要はありません。

Catalyst は「消える UI キット」です。インストールしてから 6 か月後には、元のコンポーネントを自分で構築したのではないかとほとんど忘れてしまうはずです。

デザインは細部に宿る

このようなプロジェクトで視覚的なスタイルを適切にすることは困難です。私たちはいくつかの目標を持って取り組みました。

競争力を持つ — 今日の Web 上で最も優れたインターフェースのいくつかと肩を並べることができるものを設計したいと考えました。
時代を超越する — 特定のトレンドに偏りすぎて、6 か月後には時代遅れに見えるようなものを設計したくありませんでした。
生産的である — 設計したものは何であれ、Dribbble のショットで見栄えが良いだけでなく、実際のユーザーにとって高速かつ効率的に感じられる必要がありました。

多くの作業と、バランスを取るための多くのトレードオフがありましたが、最終的にたどり着いた場所に本当に満足しています。

競争力を持つために、ドロップダウンメニューの微妙な背景のぼかし、フォームコントロールでの影と境界線の調和の完璧化、ダイアログやトグルスイッチなどのアニメーションの思慮深い使用など、多くの細部に投資しました。

時代を超越するために、フラットデザインとスキューモーフィックデザインの間で適切なバランスを取るように努めました。トレンドがどちらの方向に少し変化しても、コンポーネントが見栄えがするように、十分な奥行きの手がかりを持たせました。

また、ブラウザからインスピレーションを得て、すぐに時代遅れになる可能性のある処理を選択しないように、偏見のない青色のフォーカスリングを使用しました。

生産的であるために、十分な空白があることを確認しながら、UI が画面上に十分な情報を収容できるほど高密度になるように注意深く作業しました。

また、トランジションとアニメーションの使用は、重要だと感じられる場所に限定し、それでも UI を待っているように感じられないように、高速に保つように努めました。

Catalyst は、完全なダークモードサポートも同梱しています。Catalyst コンポーネントで構築したものはすべて、ライトモードとダークモードの間で自動的に適応します。

明らかではありませんが、ダークモードで最高に見えるようにするために変更しなければならなかった小さな詳細がたくさんあります。たとえば、影の調整、照明の変化を模倣するために外側のリングを内側のリングに変更するなどです。

HTML をモデルに

コンポーネント API の開発に非常に多くの時間を費やし、柔軟性を損なうことなく、すぐに簡単にドロップインして使用できるようにするために、非常に努力しました。

UI ライブラリがこのような API を使用するのは一般的です。

JSX

function Example() {
  return (
    <TextField
      name="product_name"
      label="Product name"
      description="Use the name you'd like people to see in their cart."
    />
  );
}

しかし、すべての props が同じコンポーネントに存在する場合、<input> 要素自体にだけクラスを追加するようなことが難しくなり始めます。

最終的に、それが HTML を密接に反映した API につながりました。そこでは、単一のコンポーネントが複数の要素をレンダリングすることはまれです。

たとえば、Catalyst でテキストフィールドを作成すると、次のようになります。

import { Description, Field, Label } from "@/components/fieldset";
import { Input } from "@/components/input";
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" />
    </Field>
  );
}

このようにコンポーザブルにすることで、他の要素の幅を制約することなく、入力の幅を制約するようなことが非常に簡単になります。

import { Description, Field, Label } from "@/components/fieldset";
import { Input } from "@/components/input";
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" />
      <Input name="product_name" className="max-w-sm" />
    </Field>
  );
}

また、説明を上ではなく入力の下に移動することも簡単になります。

import { Description, Field, Label } from '@/components/fieldset'
import { Input } from '@/components/input'
function Example() {
  return (
    <Field>
      <Label>Product name</Label>
      <Description>Use the name you'd like people to see in their cart.</Description>
      <Input name="product_name" className="max-w-sm" />
      <Description>Use the name you'd like people to see in their cart.</Description>
    </Field>
  )
}

これらの API を機能させるための正しい方法、特にレイアウトスタイルを適切な子に追加するなどの詳細について理解するには、多くの実験が必要でしたが、その価値はあり、これらのコンポーネントは本当に使うのが楽しいです。

次世代の Headless UI を搭載

2020 年の夏に Headless UI の最初のバージョンをリリースしましたが、Tailwind CSS 自体に注力してきたすべての作業のため、最後の重要な機能リリースから 1 年以上が経過しました。

Catalyst は、Headless UI を再び触るのに最適な口実でした。そして、Catalyst 自体のコードを簡素化するためにプロジェクトを改善する方法をすぐにたくさん見つけました。

Headless UI v2.0.0-alpha.1 を公開しました。これには、たくさんの新機能が含まれています。

組み込みのアンカーポジショニング — Floating UI を使用して、Menu、Listbox などのコンポーネントは、ビューポートの変更に応じて必要に応じて適応しながら、ポップオーバーをトリガーにアンカーするように自動的に配置できるようになりました。
Headless チェックボックスコンポーネント — 既存の RadioGroup コンポーネントを補完するために、headless Checkbox コンポーネントを追加しました。これにより、完全にカスタムのチェックボックスコントロールを簡単に構築できます。
HTML フォームコンポーネント — フォームフィールドを接続するために必要な ID 生成と aria-* 属性マッピングのすべてを処理する Input、Select、Textarea、Label、Description、Fieldset、Legend コンポーネントを追加しました。
改善されたホバーおよび focus-visible 検出 — 優れた React Aria ライブラリのフックを内部で使用することで、Headless UI は、ネイティブの疑似クラスよりもさまざまなデバイス間でより一貫して動作する、よりスマートな data-hover および data-focus 属性をコントロールに追加するようになりました。
コンボボックスリストの仮想化 — Headless UI の次のバージョンでは、パフォーマンスの問題なしに、コンボボックスオプションの巨大なリストを処理できるようになりました。

...日付ピッカー、ツールチップなど、他にも多くの改善が予定されています。

これらの改善は、初期アルファ期間中は React のみですが、v2.0 をタグ付けする前に、これらの改善をすべて Vue にも導入する予定です。

この件に関するドキュメントは近日中に公開する予定ですが、たとえ Headless UI のドキュメントを数日遅れて公開することになっても、ホリデーシーズン前に Catalyst をリリースすることにしました。

ぜひお試しください

Catalyst は、すべての Tailwind UI All-Access のお客様向けの無料アップデートです。今すぐダウンロードして、この最初のリリースをお試しください。

本日リリースするすべてのものを適切に準備するために、想像を絶するほどの作業を行いましたが、フィードバックや改善できる方法を求めています。ぜひ何かを構築して、ご意見をお聞かせください。

ホリデーシーズン中に数週間充電期間をいただきますが、新年にはすぐに Catalyst に戻り、アプリケーションレイアウト、コンボボックス、コマンドパレット、ツールチップなどの新しいコンポーネントに取り組む予定です。