Instalación

Agrega Konfront UI a un proyecto de Next.js con el CLI de shadcn. Instalas solo lo que usas y el código queda en tu repositorio.

Requisitos

  • Next.js 15 o posterior con App Router y React 19, y Tailwind CSS v4.
  • Un proyecto con shadcn inicializado: npx shadcn@latest init.

Pasos

  1. 1

    Registra los namespaces

    En components.json, agrega la base y el namespace del cliente para el que trabajas.

    components.json
    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "tailwind": { "css": "app/globals.css", "cssVariables": true },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@konfront": "https://ui.konfront.mx/r/{name}.json",
    "@konfront-andina-salud": "https://ui.konfront.mx/r/andina-salud/{name}.json"
  }
}
  2. 2

    Instala el tema primero

    setup escribe los tokens del tema en tu CSS global y reemplaza los de shadcn. Instálalo solo, antes de cualquier componente: si llega como dependencia de otro, el CLI no sobrescribe las variables que ya existen.

    npx shadcn@latest add @konfront/setup
# o, para un cliente:
npx shadcn@latest add @konfront-andina-salud/setup
  3. 3

    Instala componentes

    Cada componente se instala por nombre. El CLI resuelve sus dependencias y copia el código a tu proyecto, ya con el estilo y los iconos del namespace.

    npx shadcn@latest add @konfront/button @konfront/card @konfront/badge @konfront/input
  4. 4

    Carga la fuente del tema

    Konfront usa Inter Tight en 400, 500 y 700 (no es lo mismo que Inter). Si el tema del cliente define otra fuente, cárgala igual y apúntala a --font-body. Los iconos con significado fijo están en Iconografía.

    app/layout.tsx
    import { Inter_Tight } from "next/font/google"

const interTight = Inter_Tight({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  variable: "--font-inter-tight",
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es-MX">
      <body
        className={interTight.variable}
        style={{ ["--font-body" as string]: "var(--font-inter-tight)" }}
      >
        {children}
      </body>
    </html>
  )
}

Siguientes pasos