Acabamos de publicar la primera actualización importante de Catalyst desde el lanzamiento de la vista previa de desarrollo, con dos nuevos diseños de aplicación, componentes navbar y sidebar, listas de descripción y más.

También estamos emocionados de compartir que con el lanzamiento de Headless UI v2.0 para React, Catalyst ya no está en vista previa de desarrollo — es oficialmente estable y puedes empezar a usarlo en producción hoy mismo sin preocuparte por cambios disruptivos en las dependencias subyacentes.

Echa un vistazo a nuestro nuevo sitio de demostración en vivo para ver por ti mismo cómo se ve y se siente un proyecto completo de Catalyst después de estas actualizaciones.

Nuevos componentes de diseño de aplicación

Una de las cosas más difíciles al intentar empezar una nueva idea de proyecto es superar el lienzo en blanco para poder empezar a construir algo realmente.

En esta actualización hemos añadido dos nuevos componentes de diseño de aplicación para facilitar dar forma y estructura a tu proyecto, de modo que tengas algo con lo que empezar a construir.

El primer diseño es un clásico diseño de barra lateral, que mueve la barra lateral a un menú móvil plegable en pantallas más pequeñas:

import { SidebarLayout } from "@/components/sidebar-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <SidebarLayout
      sidebar={<Sidebar>{/* Menú de la barra lateral */}</Sidebar>}
      navbar={<Navbar>{/* Navbar para pantallas móviles */}</Navbar>}
    >
      {/* Contenido de tu página */}
    </SidebarLayout>
  );
}

El segundo es un diseño apilado más simple con un menú de navegación horizontal, que a menudo es una gran opción para aplicaciones con menos páginas:

import { StackedLayout } from "@/components/stacked-layout";
import { Navbar } from "@/components/navbar";
import { Sidebar } from "@/components/sidebar";
function Example({ children }) {
  return (
    <StackedLayout
      navbar={<Navbar>{/* Menú de navegación superior */}</Navbar>}
      sidebar={<Sidebar>{/* Contenido de la barra lateral para menú móvil */}</Sidebar>}
    >
      {/* Contenido de tu página */}
    </StackedLayout>
  );
}

Y ambos soportan el modo oscuro también, por supuesto:

Trabajamos muy duro para acertar con las APIs de todos estos componentes, facilitando la colocación de las cosas donde necesitas que estén, incluir iconos opcionalmente, incorporar menús desplegables y más.

El resultado final resultó sentirse realmente simple, que es exactamente lo que buscábamos, y creo que encontrarás que son un verdadero placer para construir.

Consulta la documentación del diseño de barra lateral y la documentación del diseño apilado para empezar, luego profundiza en los componentes Navbar y Sidebar para aprender cómo estructurar todos los elementos de navegación.

Listas de descripción

Cuando estábamos trabajando en los diseños de la aplicación nos dimos cuenta de que no teníamos ningún gran contenido para demostrarlos, así que preparamos un componente DescriptionList para llenar ese gran espacio vacío.

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

Es una API realmente simple que funciona igual que el elemento HTML <dl>, pero está bien estilizada, es Responsive y con soporte para modo oscuro, por supuesto.

Consulta la documentación de Lista de descripción para más detalles.

Encabezados de página

¡Más componentes que necesitábamos para que la demo se viera bien! Hemos añadido componentes Heading y Subheading que puedes usar para titular cosas de forma rápida y consistente en tu UI.

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

Puedes controlar qué elemento de encabezado HTML se renderiza usando la prop level, y como todo lo demás, son Responsive con soporte incorporado para modo oscuro.

Consulta la documentación de Encabezado para más ejemplos.

Divisores

Guardamos lo mejor para el final — Catalyst ahora incluye una línea gris que puedes poner entre cosas.

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

Trabajamos incansablemente en este, y estamos muy orgullosos de facilitar esta parte de tu proceso de desarrollo de aplicaciones.

Consulta la documentación de Divisor — tiene al menos una prop.

Catalyst está incluido con tu licencia de acceso total a Tailwind UI sin costo adicional, así que si tienes una licencia, inicia sesión y descarga la última versión para empezar a construir.

¡Esperamos ver lo que haces con él!