For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /es/docs/web/ui-kit.md (or send Accept: text/markdown).

Kit de UI y bloques

Componentes compartidos, design tokens y el catálogo de bloques.

Preguntar sobre esta guía

Antes de comenzar

Abra su proyecto supastack descargado en Visual Studio Code usando Archivo → Abrir carpeta, luego elija Terminal → Nueva terminal. La raíz del repositorio es la carpeta que contiene package.json, aplicaciones y paquetes. Ejecute el comando a continuación y deje su terminal abierta. Si no se reconoce un comando, finalice la guía de instalación de la herramienta antes de continuar.

Lea primero el tutorial de la plataforma. Un servidor es el proceso de la aplicación que responde a las solicitudes del navegador o del teléfono. La web lee apps/web/.env.local, Expo lee apps/mobile/.env.local y los comandos de migración de bases de datos leen root .env. La demostración sin base de datos/panel de control está separada de las cuentas reales/de autenticación, que necesitan migrar Postgres. Un proceso de pago solo por teléfono o computadora de escritorio necesita un backend web que se ejecute por separado.

corepack pnpm --filter @supastack/web dev

Configuración y ajustes

packages/ui-web contiene los componentes de producto compartidos (botones, inputs, tarjetas, badges, diálogos, piezas de shell) y packages/design-tokens la fuente de tokens que app-theme.css mapea a variables CSS. La ruta /kit-blocks monta el catálogo de bloques — secciones compuestas que puedes llevar a tu producto.

apps/mobile consume packages/ui-native para los primitivos nativos equivalentes, así que el estilo de superficie permanece por plataforma mientras los contratos se comparten.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

Flujo de implementación

Compón pantallas primero desde los componentes compartidos; recurre a un elemento personalizado solo cuando el kit no puede expresar el patrón. Las nuevas piezas compartidas pertenecen a ui-web con estilos dirigidos por tokens para que cada pack de tema se aplique automáticamente.

Mantén los componentes de marketing (src/marketing) fuera de las superficies de producto y viceversa — los dos sistemas de chrome están separados intencionadamente.

Verificación y solución de problemas

Verifica un nuevo componente contra cada preset de densidad/radio/fuente y al menos un pack claro y uno oscuro. Comprueba el foco de teclado, el layout a 320px y la reduced motion; la galería del kit en /settings/appearance es el barrido más rápido.