我們剛剛發布了 Catalyst 自發布開發預覽版以來的第一個重大更新，包含兩個新的應用程式佈局、導覽列和側邊欄元件、描述列表等等。

我們也很高興地宣布，隨著 Headless UI v2.0 for React 的發布，Catalyst 不再是開發預覽版 — 它已正式穩定，您可以立即開始在生產環境中使用它，而不必擔心底層相依性會出現重大變更。

請查看我們全新的 即時演示網站，親自了解更新後完整的 Catalyst 專案的外觀和感覺。

新的應用程式佈局元件

嘗試開始一個新專案想法時，最困難的事情之一就是克服空白畫布，這樣您才能真正開始建構東西。

在此更新中，我們新增了兩個新的應用程式佈局元件，讓您可以輕鬆為您的專案提供形狀和結構，以便您可以開始使用它進行建構。

第一個佈局是經典的 側邊欄佈局，它在較小的螢幕上將側邊欄移動到可摺疊的行動選單中。

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>  );}

第二個是較簡單的 堆疊佈局，具有水平導覽選單，通常非常適合頁面較少的應用程式。

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 都正確，讓您可以輕鬆地將事物放置在您需要它們的位置，可選擇包含圖示、整合下拉式選單等等。

最終結果感覺非常簡單，這正是我們想要的，而且我認為您會發現它們非常適合用於建構。

請查看 側邊欄佈局文件 和 堆疊佈局文件 以開始使用，然後深入研究 導覽列 和 側邊欄 元件，以了解如何架構所有導覽項目。

描述列表

當我們在開發應用程式佈局時，我們意識到我們沒有任何很棒的內容來展示它們，因此我們設計了一個 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>  );}

這是一個非常簡單的 API，就像 HTML <dl> 元素一樣運作，但具有精美的樣式、響應式設計，當然也支援深色模式。

請查看 描述列表 文件以取得更多詳細資料。

頁面標題

更多讓演示看起來很棒所需的元件！我們新增了 Heading 和 Subheading 元件，您可以使用它們快速且一致地為您的 UI 中的內容加上標題。

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

您可以使用 level 屬性控制要呈現的 HTML 標題元素，並且像其他所有內容一樣，它們是具有內建深色模式支援的響應式設計。

請參閱 標題 文件以取得更多範例。

分隔線

把最好的留在最後 — Catalyst 現在包含一條灰色的線條，您可以將其放在事物之間。

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

我們為此努力不懈，並且非常自豪能讓它成為您應用程式開發過程的一部分，使其更加輕鬆。

請查看 分隔線 文件 — 它至少有一個屬性。

Catalyst 包含在您的 Tailwind UI 全面存取授權中，無需額外付費，因此如果您有授權，請登入並下載最新版本以開始建構。

期待看到您使用它來做什麼！