Componentes de diseño
Componentes que ordenan y muestran contenido: acordeones y collapsibles con animación de altura reversible a mitad, un carrusel con scroll-snap, paneles divididos redimensionables, áreas de scroll con bordes difuminados, cajas de proporción y separadores.
Los paneles cerrados siguen siendo buscables con la búsqueda del navegador, y nada salta cuando carga el contenido.
- AccordionEncabezados apilados que revelan cada uno un panel, con un movimiento de altura que puedes invertir a mitad de camino y paneles que siguen siendo buscables mientras están cerrados.
- Aspect ratioUn contenedor que mantiene su forma antes de que cargue el contenido multimedia, muestra un brillo mientras carga, hace aparecer el contenido con un fundido y muestra una alternativa si falla.
- CarouselDiapositivas nativas con scroll-snap, con inercia en pantallas táctiles, arrastre con el ratón, teclas de flecha, puntos, miniaturas y una reproducción automática que se pausa cuando debe.
- CollapsibleUn panel que se muestra y se oculta con un movimiento de altura que puedes invertir a mitad de camino, sin saltos en el diseño.
- ResizablePaneles que puedes separar arrastrando, con un divisor discreto que despierta al pasar el cursor, tamaños que se deslizan al restablecer o colapsar, y diseños que persisten.
- Scroll areaScroll nativo con una barra de desplazamiento mínima, bordes que se desvanecen solo donde hay más por ver y un vistazo opcional que corta el último elemento por la mitad.
- SeparatorUna línea fina que divide el contenido horizontal o verticalmente, con una etiqueta opcional y un modo decorativo para líneas puramente visuales.
Usados en bloques Pro
Bloques para productos de IA construidos con estos componentes.
- Agent TodosEl plan que un agente mantiene mientras trabaja, una línea por paso. Cubre pasos en curso, pasos fallidos y cambios del plan a mitad de ejecución.
- Chat SidebarLa barra lateral de una app de chat, con chats fijados, proyectos y recientes. Cubre renombrar en el sitio, borrar con deshacer y chats que aún responden.
- Stack TraceUn fallo mostrado como lo lee un desarrollador. Tu código va primero, los frames del framework se pliegan y cada causa aparece en orden.
- SubagentsLas ejecuciones que un agente delega a otros agentes, una línea por ejecución. Cubre ejecuciones en paralelo, detener y reintentar, y un resumen al terminar cada una.
- Test ResultsLa ejecución de tests de un agente, mostrada en vivo. Los tests llegan en streaming y se pliegan en un resumen, con cada fallo abierto y su diff a la vista.
- ThinkingLa vista de razonamiento de un chat de IA. Una etiqueta en vivo sigue cada paso, las búsquedas y fuentes se pliegan en un rastro y las citas acompañan la respuesta.