我们刚刚发布了 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 全功能许可证中，无需额外费用，因此如果您拥有许可证，请登录并下载最新版本以开始构建。

期待看到您用它做什么！