開発プレビュー版をリリースして以来、Catalyst の最初のメジャーアップデートを公開しました。2つの新しいアプリケーションレイアウト、navbarとsidebarコンポーネント、説明リストなどが含まれています。

また、React用 Headless UI v2.0 のリリースに伴い、Catalyst は開発プレビュー版ではなくなりました。— 正式に安定版となり、基盤となる依存関係の破壊的な変更を心配することなく、今日から本番環境で使用を開始できます。

新しい ライブデモサイト をチェックして、これらのアップデート後の Catalyst プロジェクトがどのような外観と使い心地になっているかご自身でご確認ください。

新しいアプリケーションレイアウトコンポーネント

新しいプロジェクトのアイデアを始めようとするときに最も難しいことの1つは、実際に何かを構築し始めることができるように、空白のキャンバスを乗り越えることです。

今回のアップデートでは、プロジェクトに形状と構造を簡単に与え、構築を開始できるものを用意するために、2つの新しいアプリケーションレイアウトコンポーネントを追加しました。

最初のレイアウトは、クラシックな サイドバーレイアウト で、サイドバーを小さな画面では折りたたみ可能なモバイルメニューに移動します。

import { SidebarLayout } from "@/components/sidebar-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <SidebarLayout
      sidebar={<Sidebar>{/* Sidebar menu */}</Sidebar>}
      navbar={<Navbar>{/* Navbar for mobile screens */}</Navbar>}
    >
      {/* Your page content */}
    </SidebarLayout>
  );
}

2番目は、水平ナビゲーションメニューを備えたよりシンプルな スタックレイアウト で、ページ数の少ないアプリに最適です。

import { StackedLayout } from "@/components/stacked-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <StackedLayout
      navbar={<Navbar>{/* Top navigation menu */}</Navbar>}
      sidebar={<Sidebar>{/* Sidebar content for mobile menu */}</Sidebar>}
    >
      {/* Your page content */}
    </StackedLayout>
  );
}

そしてもちろん、両方ともダークモードもサポートしています。

これらのすべてのコンポーネントのAPIを適切に作成するために、非常に努力しました。必要な場所に要素を簡単に配置したり、オプションでアイコンを含めたり、ドロップダウンメニューを組み込んだりできるようにしました。

最終的な結果は非常にシンプルになり、まさに私たちが目指していたものであり、これらは本当に楽しく構築できるものだと感じていただけると思います。

まず、サイドバーレイアウトのドキュメント と スタックレイアウトのドキュメント を確認し、次に Navbar および Sidebar コンポーネントを掘り下げて、すべてのナビゲーションアイテムを構造化する方法を学んでください。

説明リスト

アプリケーションレイアウトに取り組んでいた際、デモに使用できる優れたコンテンツがないことに気づいたため、大きな空白スペースを埋めるために DescriptionList コンポーネントを作成しました。

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/description-list";
function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>Customer</DescriptionTerm>
      <DescriptionDetails>Michael Foster</DescriptionDetails>
      <DescriptionTerm>Event</DescriptionTerm>
      <DescriptionDetails>Bear Hug: Live in Concert</DescriptionDetails>
      {/* ... */}
    </DescriptionList>
  );
}

これは HTML の <dl> 要素とまったく同じように機能する非常にシンプルな API ですが、適切にスタイルが設定され、レスポンシブで、もちろんダークモードもサポートしています。

詳細については、説明リスト のドキュメントをご覧ください。

ページ見出し

デモをより良く見せるために必要なコンポーネントをさらに追加しました！UI内の項目に迅速かつ一貫してタイトルを付けるために使用できる Heading および Subheading コンポーネントを追加しました。

import { Heading, Subheading } from "@/components/heading";
function Example() {
  return (
    <div>
      <Heading>Heading</Heading>
      <Subheading>Subheading</Subheading>
    </div>
  );
}

level プロパティを使用して、レンダリングされる HTML 見出し要素を制御できます。また、他のすべてのものと同様に、レスポンシブで、組み込みのダークモードをサポートしています。

その他の例については、Heading のドキュメントをご覧ください。

区切り線

最後にとっておきのものを紹介します — Catalyst には、物事の間に配置できる灰色の線が含まれるようになりました。

import { Divider } from "@/components/divider";
function Example() {
  return <Divider />;
}

これにはたゆまぬ努力を重ね、アプリケーション開発プロセスをより簡単にするこの機能を皆様にご提供できることを大変誇りに思っています。

Divider のドキュメントをご覧ください — 少なくとも1つのプロパティがあります。

Catalyst は Tailwind UI オールアクセスライセンスに無料で含まれています。ライセンスをお持ちの場合は、ログインして 最新バージョンをダウンロード し、構築を開始してください。

皆様が Catalyst で何を作成されるか楽しみにしています！