Fieldbook es un catálogo de componentes UI originales para React, Vue, Svelte, Astro y HTML, creado por Lizardi Studio en Ciudad de México, con un servidor MCP para agentes de programación.

Muévelos, ajústalos y llévate React, Vue, Svelte, Astro o HTML, o dale el número de la ficha a tu agente de programación.

Explorar componentes Conectar tu agente

1404 componentes21 categorías5616 versiones probadas

Cada ficha está activa.

Cada una es el componente real, funcionando en tu navegador. Abre una para llevarte el código.

Imagen fija del componente Jello squash button de Fieldbook, de la categoría Botones.

FB-2556Jello squash buttonelastic

Imagen fija del componente Spring easing toggle de Fieldbook, de la categoría Animación.

FB-1808Spring easing toggleback-out

Imagen fija del componente Elastic tug slider de Fieldbook, de la categoría Campos de entrada.

FB-2795Elastic tug sliderexpo-out

Imagen fija del componente Three layer push button de Fieldbook, de la categoría Botones.

FB-2620Three layer push buttonbounce

Imagen fija del componente Spring Push Collapsible de Fieldbook, de la categoría Visualización de datos.

FB-2052Spring Push Collapsibleease-in-out

Imagen fija del componente Reflowing Notification Stack de Fieldbook, de la categoría Visualización de datos.

FB-2412Reflowing Notification Stacklinear

Ver todas las fichas en vivo

Ajusta el movimiento.

Elige una curva y pruébala en un botón, un interruptor y una tarjeta. Muchos componentes de Fieldbook aceptan propiedades de duración, velocidad o aceleración para que ajustes el movimiento a tu gusto.

¿Cómo debe llegar?

t 0.00 · 900 ms · back-out

linear

ease-in-out

expo-out

back-out

bounce

elastic

back-out

Un sistema, seis familias de productos.

Botones, interruptores, controles deslizantes y tarjetas, agrupados según lo que estás construyendo, para encontrar las piezas que encajan en tu interfaz.

Familias de productos

botón

1404 componentes listos para instalar.

Busca según lo que estás construyendo, filtra por familia y llévate React, Vue, Svelte, Astro o HTML.

Abrir el índice completo

Explorar el índice

Tu agente lo instala.

Conecta el servidor MCP de Fieldbook una vez. Pide una ficha por su número y tu agente obtiene el componente, sus propiedades y sus versiones.

terminal

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

.mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "type": "http",
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${FIELDBOOK_TOKEN}"
      }
    }
  }
}

~/.grok/config.toml

[mcp_servers.fieldbook]
url = "https://fieldbook.lizardi.mx/api/mcp"
headers = { "Authorization" = "Bearer ${FIELDBOOK_TOKEN}" }

.cursor/mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FIELDBOOK_TOKEN}"
      }
    }
  }
}

mcp

url        https://fieldbook.lizardi.mx/api/mcp
transport  streamable http
header     Authorization: Bearer $FIELDBOOK_TOKEN

pedir

Añade FB-2556 al botón de guardar en ajustes.

obtener

código del componente
propiedades y valores predeterminados
React, Vue, Svelte, Astro, HTML

usar

Leer la configuración de MCP

Ponlo en movimiento.

Empieza con los componentes abiertos o elige Pro para acceder al catálogo completo por 14,99 USD al mes.

Explorar componentes Ver precios de Pro

Componentes que se mueven.