Componentes de visualización de datos
Componentes para mostrar información: una tabla de datos con orden, selección y columnas fijas, gráficos de Recharts que siguen el tema, una vista de árbol, tarjetas, elementos de lista, badges, avatares, teclas y números que ruedan hasta su nuevo valor.
También resuelven los casos densos, con cabeceras de tabla fijas, columnas ancladas y navegación por teclado entre los puntos del gráfico.
- AvatarFotos de usuario con iniciales como alternativa, insignias de estado y grupos apilados que se colapsan en un contador.
- BadgeEtiquetas de estado con puntos de color, tags eliminables que se deslizan al cerrarse y contadores que ruedan hasta su nuevo valor.
- CardUna superficie para agrupar contenido, con tres variantes, contenido multimedia de borde a borde, radios concéntricos y enlaces en toda la tarjeta.
- ChartGráficos de Recharts con colores del tema, un tooltip y una leyenda que leen las etiquetas de una sola configuración, y navegación con teclado con un anillo de foco visible.
- Data tableUna tabla para datos reales, con ordenación, búsqueda, selección de filas, columnas fijadas, un encabezado fijo y paginación.
- ItemUna fila de contenido multimedia, texto y acciones para listas, ajustes y selectores, con una superficie agrupada y un resaltado al pasar el cursor que se desliza entre filas.
- KbdTeclas para atajos que muestran los símbolos correctos en cada plataforma, se leen en voz alta correctamente y se hunden como las teclas reales.
- Number flowNúmeros animados donde solo giran los dígitos que cambian, con cualquier formato Intl y configuración regional.
- TableUna tabla responsive con estilo de superficie, celdas que se ajustan o compactas, encabezados fijos, columnas ancladas e indicadores de desplazamiento.
- TreeFilas anidadas y expandibles para archivos y jerarquías, con guías de sangría, líneas conectoras, checkboxes en cascada, typeahead y soporte completo de teclado.
Usados en bloques Pro
Bloques para productos de IA construidos con estos componentes.
- 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.
- Diff ReviewUna revisión de las ediciones de archivos de un agente antes de aplicarlas. Cubre aceptar o rechazar cada cambio, comentarios de vuelta al agente y ediciones aún en streaming.
- 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.
- ProfileLa sección Perfil de los ajustes de un producto de IA. Cubre el recorte de foto, un nombre de usuario comprobado mientras escribes y cambios de correo confirmados por código.
- SettingsLa página de ajustes de un producto de IA. Cubre una barra de guardado que aparece solo cuando algo cambió, errores de campo y estados de carga.
- TeamLa página de equipo de los ajustes del espacio de trabajo de un producto de IA. Cubre asientos que se agotan, invitaciones pendientes y transferencia de propiedad con confirmación escrita.