Instalación — logic2b/ui

Esta guía usa logic2b@next, el canal beta de npm. next puede cambiar: registra npx logic2b@next --version al comunicar un problema. El selector --registry-version controla el registro, no la versión del paquete CLI.

Requisitos

React 18 o posterior (React 19 recomendado)
Tailwind CSS v4

Compatibilidad

La versión 1.0.0 aún no se ha publicado. En npm, latest sigue apuntando a las versiones antiguas de CLI 0.4.0 y MCP 0.2.0; usa next para los paquetes beta actuales y el registro. Las versiones siguientes son con las que se verificó esta documentación.

Área	Beta actual	Notas
Contenido del registro	`1.0.0-rc.16`, canal `next`	Manifiestos inmutables; SHA-256 verificado por CLI y MCP
Paquetes CLI y MCP local	`logic2b@next`, `@logic2b/mcp@next` (publicado `1.0.0-rc.2`; las novedades del MCP remoto siguen pendientes en npm)	Node.js 18+ con npm, pnpm, yarn o bun
Componentes	React 19.2, Tailwind CSS 4.3, TypeScript 6 (pins del registro)	La mayoría funciona también con React 18
Starters generados	Next.js 16.3, Vite 8.2, Astro 7.2	Pins exactos en cada `package.json` generado
MCP remoto (`/mcp`)	HTTP streamable, sin estado, herramientas de solo lectura	Devuelve planes y fuentes verificadas; no escribe archivos
Capacidades del host para aplicar un plan	Escritura de archivos; gestor de paquetes y runtime de build para instalar y verificar	Un host solo de chat puede inspeccionar y planificar
Extensión de VS Code	VSIX de vista previa `0.1.0` generado por CI	No publicada en el Marketplace
Desarrollo del repositorio	Node.js 22.12+, pnpm 11.10	Ver CONTRIBUTING.md

1. Instala las dependencias base

pnpm add clsx tailwind-merge class-variance-authority radix-ui lucide-react

2. Añade el helper cn()

Crea src/lib/utils.ts:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

También puedes instalarlo desde el registro:

npx logic2b@next add utils

3. Añade los tokens del tema

Copia las variables CSS de la página de Temas a tu hoja de estilos global. Los componentes usan tokens como bg-primary y text-muted-foreground; sin ellos el diseño no será correcto.

4. Añade componentes

npx logic2b@next add button

También puedes copiar el código desde cualquier página de componente.

Para instalar una superficie de marketing completa como una sola composición:

npx logic2b@next add landing-page-01

El registro resuelve de forma transitiva su navbar, hero animado, cuadrícula de funcionalidades, CTA y footer. Cada pieza sigue siendo instalable y actualizable por separado.

Instalaciones versionadas y actualizaciones seguras

Inicializa el proyecto para fijar la versión exacta del registro:

npx logic2b@next init
npx logic2b@next add button card
npx logic2b@next status

init escribe logic2b.version en components.json. Cada instalación también queda registrada en .logic2b/manifest.json con la versión resuelta, la integridad SHA-256 de cada elemento y sus archivos. Así los mismos datos de entrada se pueden reproducir aunque un canal avance más tarde.

Los presets de /create también guardan la librería de iconos. Elige Lucide, Tabler, Phosphor o Hugeicons; init --preset <id> conserva la selección como iconLibrary, y add/update reescriben juntos imports, dependencias npm y snapshots de mezcla.

Puedes seleccionar una versión exacta, un rango semver o un canal publicado:

npx logic2b@next add button --registry-version 1.0.0-rc.16
npx logic2b@next status --registry-version next
npx logic2b@next update --registry-version "^1.0.0"

logic2b update solo considera los elementos registrados en el manifiesto, a menos que indiques nombres. Realiza una mezcla de tres vías contra el snapshot capturado al instalar: actualiza archivos intactos, conserva cambios locales, mezcla cambios compatibles y marca los solapamientos para revisión. Consulta /r/changelog/<name>.json antes de ampliar un rango.

En el candidato de código fuente, los conflictos siguen pendientes al repetir una actualización. Los marcadores identificados se registran en .logic2b/update-conflicts.json; update termina con código 1 mientras haya conflictos o diferencias sin un snapshot base que revisar. Resuelve el código conservando los cambios locales y de origen que correspondan y vuelve a actualizar. Borrar el registro no resuelve el conflicto. Los cambios independientes en líneas contiguas pueden combinarse sin conflicto. Este comportamiento describe el código actual; la publicación npm es un paso aparte.

Uso con un asistente de IA

Cada bloque de instalación incluye una pestaña Agent y el estudio de temas incluye una vista Prompt. Un asistente conectado al MCP de logic2b puede partir de un directorio vacío: pídele que use scaffold_plan con un framework (next, vite o astro) y un starter (marketing, dashboard o auth). La respuesta contiene todos los archivos, el tema, dependencias transitivas y la integridad de la versión resuelta.

Alias de rutas

Los componentes importan desde @/lib/utils y @/components/ui/*. Configura el alias @ en tsconfig.json y en tu bundler para que apunte a src/.

Reglas para agentes en el candidato de código fuente

El código actual añade AGENTS.md y DESIGN.md gestionados durante init (incluidas las plantillas), add y update. Puedes omitirlos con --no-agent-rules. Se conservan las instrucciones propias fuera de los marcadores. Ejecuta logic2b rules --format agents,claude,cursor,copilot en el directorio de la aplicación para generar formatos de editor. Comprueba primero --help en un CLI instalado: disponer del código no implica publicación npm. Consulta la integración con agentes para conocer cómo combinar documentos, los límites del host y la skill incluida.