Componentes originales, renderizados en vivo

Componentes que ya se mueven.

Una biblioteca de componentes creados para este sitio. Cada uno funciona aquí en React, responde a tus acciones y ofrece versiones Vue, Svelte, Astro y HTML. Revisamos su diseño con treinta criterios.

Explorar componentes Conecta tu agente

1,318 componentes · 19 categorías · 5,186 versiones probadas

Cada ficha está activa. Desliza o usa las flechas para explorar; toca para pausar.

Botones

442

Botones, interruptores y llamadas a la acción que responden al cursor.

Ver todos

2466Add Then Confirm ChipBotonesUn chip oscuro con una etiqueta cálida cuyo signo más se balancea de lado a lado al pasar el mouse, luego gira hasta convertirse en una marca e informa el elemento agregado.

2707Amber upload pillBotonesUna cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse.

2625Anaglyph wobble buttonBotonesUn botón que cuelga en un lento movimiento 3D y, cuando se mantiene suspendido o enfocado, arroja duplicados cálidos y fríos de sí mismo fuera de registro con una oscilación excesiva.

2518Annotated anatomy buttonBotonesUn botón que se explica por sí mismo: al pasar el mouse, aparecen marcas de medición y líneas guía que nombran su relleno, relleno, radio de esquina y ranura de icono.

Campos de entrada

104

Campos, códigos, selectores e interruptores con estados claros.

Ver todos

2297Addon Input GroupCampos de entradaUn campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo.

2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.

2109Appointment Scheduler CardCampos de entradaUn selector de fecha único enmarcado dentro de una tarjeta titulada con un botón para saltar a hoy en la esquina, diseñado para reservar una cita.

2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.

Fondos

Lienzos y superficies que forman el fondo del contenido.

Ver todos

1665Assistant Ripple GlowFondosUna onda en forma de anillo se extiende hacia afuera sobre un duplicado del propio contenido de un panel mientras su borde se ilumina mientras se ejecuta una tarea.

2110Aurora band glowFondosUna suave cinta de luz que se extiende a lo largo de un marco oscuro, su borde vaga sobre el ruido en capas mientras el color camina a lo largo de su longitud.

1666Aurora curtainFondosUna suave cortina de luz que cuelga del borde superior, su dobladillo inferior sube y baja en una lenta onda de ruido mientras su color cambia a lo ancho.

1526Aurora veilFondosUn fondo sin bordes de tres cintas de luz a la deriva que se suman donde se cruzan, sobre un fondo oscuro, con una capa de leyenda que permanece legible.

Efectos de texto

Palabras que aparecen, se transforman, cuentan o fluyen.

Ver todos

2301Ascii Art HeadingEfectos de textoUna palabra grande se representa como un mosaico de caracteres monoespaciados cuya densidad imita las formas de las letras, ondulándose e inclinándose suavemente hacia el puntero.

1915Aurora glow headingEfectos de textoUn título donde una palabra lleva un relleno degradado multicolor que se desplaza lentamente recortado en las formas de las letras, como la luz de una aurora que brilla detrás del tipo.

1921Binary Decode TextEfectos de textoCada letra parpadea brevemente hasta convertirse en un dígito binario brillante antes de descodificarse nuevamente en su carácter real, atravesando la palabra de izquierda a derecha.

2307Blur in word revealEfectos de textoLas palabras de una oración pasan de un desenfoque suave a un enfoque nítido, una tras otra, a medida que la oración aparece a la vista.

Gráficas

Líneas, áreas, barras y anillos dibujados en SVG.

Ver todos

1840Activity cell heatmapGráficasUna cuadrícula de calendario de pequeños cuadrados teñidos que se desplaza en una onda diagonal y permite que una franja de nivel aísle una intensidad a la vez.

2104Animated Time AxisGráficasUna fila de etiquetas de fecha debajo de un gráfico de líneas que selecciona automáticamente un subconjunto espaciado uniformemente para evitar aglomeraciones y desvanece las etiquetas cerca del punto sobre el que se sitúa el cursor.

2097Animated Value AxisGráficasUna columna de etiquetas de valores al lado de un gráfico que abrevia números grandes y se desliza suavemente a nuevas posiciones cada vez que cambia el rango de datos del gráfico.

1525Area chart liteGráficasUn gráfico de área SVG responsivo con marcas de eje redondo, un relleno degradado, una cruz que lee la muestra debajo del puntero y un borrado de dibujo.

Iconos

Iconos animados e indicadores de carga dibujados a mano.

Ver todos

1585Accessibility iconIconosUna figura de pie con los brazos abiertos y una postura amplia que respira con un pulso lento.

1612Activity iconIconosUn trazo de signos vitales que se dibuja de izquierda a derecha a lo largo de una línea plana, se eleva una vez y luego se aplana de nuevo.

1586Airplay iconIconosUna pantalla con un espacio en el borde inferior y un triángulo debajo que se desliza hacia abajo y hacia atrás, proyectando la imagen.

1613Alarm clock iconIconosUn despertador de dos campanas que suena sobre sus pies mientras las manecillas van medio latido por detrás de la caja.

Abrir el índice completo

Cómo verificamos los componentes

Treinta señales

Evaluamos los componentes y las páginas frente a los patrones que hacen que un diseño parezca generado automáticamente. Las puntuaciones corresponden a las reglas de la guía y el analizador.

Para agentes de programación

Elige una ficha. Tu agente la implementa.

Explora el catálogo, elige un componente y entrega a tu agente el número de ficha. Mediante el MCP de Fieldbook podrá consultar el componente, sus propiedades y sus versiones en los cinco frameworks. La configuración está en la documentación MCP.

Terminal · una línea

claude mcp add --transport http fieldbook https://fieldbook.lizardi.mx/api/mcp --header "Authorization: Bearer <your-key>"