Unozero
ChatbookEsmeraldaAtardecerOcéanoRosaBillia

Instalación

Dos paquetes, dos líneas de CSS y un import. Al terminar, cualquier componente del kit se pinta con la marca de Unozero en claro y en oscuro, en React y en Next.

  1. Instala los paquetes

    @unozero-ai/design-tokens trae el CSS de marca; @unozero-ai/ui, los componentes de React.

    pnpm add @unozero-ai/ui @unozero-ai/design-tokens

  2. Importa el CSS

    Solo los tokens. Los componentes traen sus estilos dentro (shadow DOM), así que el kit no necesita Tailwind ni que nadie escanee sus clases. Si tu app usa Tailwind v4, pon su import delante: los tokens se vuelven utilidades (bg-card, text-muted-foreground) para tus propias pantallas.

    app/globals.css
    @import "tailwindcss"; /* opcional: utilidades para tus pantallas */
@import "@unozero-ai/design-tokens/tokens.css";
@import "@unozero-ai/design-tokens/base.css"; /* opcional: reglas de página */

  3. Carga las fuentes

    Las tres fuentes de marca salen una sola vez del paquete de tokens con next/font: brandFontVariables va en el <html>. El paquete de tokens se publica como fuente TypeScript, así que Next lo transpila; el kit ya llega compilado y no lo necesita.

    app/layout.tsx
    import { brandFontVariables } from "@unozero-ai/design-tokens/fonts";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es" className={brandFontVariables}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  );
}
    next.config.ts
    const nextConfig = {
  transpilePackages: ["@unozero-ai/design-tokens"],
};

export default nextConfig;

    Fuera de Next, carga IBM Plex Sans, Manrope y JetBrains Mono como prefieras y define --font-ibm-plex-sans, --font-manrope y --font-jetbrains-mono.

  4. Usa un componente

    Los componentes se importan de @unozero-ai/ui/react, con sus props tipadas y los eventos del kit como on…. Se pueden usar desde un componente de servidor.

    app/page.tsx
    import { Button } from "@unozero-ai/ui/react";

export default function Page() {
  return <Button variant="primary">Confirmar reserva</Button>;
}

    Siguientes pasos: activar el modo oscuro, traducir los textos del kit o explorar los componentes.