Componentes

componentes

114

variantes

774

categorías

16

Acciones6Visualización9Formularios12Fechas y horas4Estado y avisos7Datos8Listas y menús7Navegación3Capas flotantes6Diálogos7Sistema2Espacio de trabajo7Código y herramientas7Agentes de IA9Disposición11Contenido9

Todos los componentes de pyzed.ui, más los widgets de disposición y contenido de pyzed, con una vista previa, el código que la dibuja, ejemplos y su API. Los componentes son funciones que devuelven widgets, así que se combinan libremente entre sí y con los widgets base.

import pyzed as pz
from pyzed import ui

ui.button("Guardar", self.guardar, icon="save", variant="solid", keys="ctrl-s")

• Colores del tema. Todos los componentes leen el tema actual (App.theme, o el de la ventana en apps multiventana) y aceptan theme= para usar otro.
• Tokens o hex. Los parámetros de color (color, icon_color, tint…) aceptan un token del tema como "accent", "text_muted" o "error", o un color "#rrggbb".
• Mensajes o funciones. on_press, on_select, on_toggle… aceptan un mensaje para update o una función; los que producen un valor (texto, bool, id) la llaman con ese valor.
• Iconos. icon= acepta cualquier nombre de Lucide (pyzed icons los lista).

Para verlos todos funcionando, abre la galería: python examples/gallery.py. ¿Buscas pantallas completas hechas con ellos (login, dashboard, ajustes, chat, kanban…)? Mira los Bloques.

Qué hay en cada página

Una explicación en pocas palabras, una vista previa con su código, cada variante, tamaño y estado capturados en claro y oscuro con el fragmento que los dibuja, ejemplos, consejos y la tabla de la API. Las páginas de componentes interactivos, como Botón y Campo de texto, también muestran una grabación corta de su uso.

Inspiración

El aspecto de estos componentes se inspira en la interfaz del editor Zed; la idea de construir herramientas de escritorio con piezas listas para usar viene de Godot, Unreal Engine, Visual Basic y Qt Designer. pyzed es un proyecto independiente.

Acciones

Botones y controles pequeños que ejecutan algo.

6 componentes · 86 variantes

Área de ratónHace que cualquier widget reaccione a clics, hover, arrastres y la rueda.5 variantes

BotónEl botón con tema: variantes, tamaños, iconos y atajos.33 variantes

Botón de iconoUn botón cuadrado con solo un icono y un tooltip opcional.20 variantes

Botón divididoUna acción principal más una flecha que abre más opciones.11 variantes

ChipUna etiqueta compacta: pulsable como filtro y con ✕ para quitarla.9 variantes

Grupo de alternanciaUn control segmentado solo con iconos.8 variantes

Visualización

Texto, insignias, teclas, avatares y superficies.

9 componentes · 92 variantes

AvatarUn avatar redondo con iniciales en un color de colaborador.15 variantes

DivisorUna línea fina en el color de borde del tema.6 variantes

EncabezadoTítulos en seminegrita en tres niveles.6 variantes

EtiquetaTexto con color, tamaño y peso del tema; muted para texto secundario.19 variantes

IndicadorUn punto de color para estado, presencia o cambios sin guardar.11 variantes

InsigniaUna pastilla pequeña para estados, versiones y contadores.15 variantes

KbdAtajos de teclado dibujados como teclas, con símbolos en macOS.6 variantes

TarjetaUna superficie con borde, título y acciones opcionales.8 variantes

TooltipUna pista que aparece al pasar el ratón, con su atajo opcional.6 variantes

Formularios

Controles controlados: muestran tu estado y te avisan de cada cambio.

12 componentes · 107 variantes

Campo de búsquedaUn campo con lupa, para filtrar.6 variantes

Campo de formularioUna fila de ajustes: título y descripción a la izquierda, control a la derecha.8 variantes

Campo de textoUn campo de texto controlado con icono, placeholder y modo contraseña.18 variantes

Campo numéricoUn número con botones −/+, límites, paso y sufijo.9 variantes

CasillaUna casilla de verificación con etiqueta opcional.10 variantes

DeslizadorElige un número de un rango arrastrando.11 variantes

Grupo de radiosOpciones excluyentes como botones de radio.8 variantes

InterruptorUn interruptor para ajustes que se aplican al momento.8 variantes

SegmentadoUn grupo de botones de texto excluyentes.9 variantes

SelectUn desplegable para elegir una opción.9 variantes

Selector de colorNuevoElige un color, un degradado o un relleno con máscara; las muestras los enseñan.7 variantes

Selector de iconosNuevoElige uno de los ~2000 iconos de Lucide en una cuadrícula con buscador.4 variantes

Fechas y horas

Calendarios y campos para fechas, rangos y horas, en el formato que elijas.

4 componentes · 25 variantes

CalendarioNuevoUna cuadrícula del mes para elegir un día, un rango o varios días, siempre a la vista.10 variantes

Selector de fechaNuevoUn campo de fecha con un calendario desplegable, en el formato que elijas.8 variantes

Selector de horaNuevoUn campo de hora con columnas de horas y minutos, en 24 o 12 horas.5 variantes

Selector de rango de fechasNuevoDos fechas en un campo, con dos meses lado a lado y rangos rápidos.2 variantes

Estado y avisos

Progreso, carga, avisos y estados vacíos.

7 componentes · 55 variantes

AvisoUn aviso en línea con título, texto y acciones.8 variantes

ContadorUn contador redondo que muestra 99+ por encima del máximo.9 variantes

Estado vacíoUn marcador centrado para listas y búsquedas vacías.5 variantes

Límite de erroresNuevoDibuja una parte de la vista, o una tarjeta de error en su lugar cuando falla.8 variantes

Pista de atajoUna pista discreta tipo “Abrir archivo Ctrl P”.3 variantes

ProgresoUna barra de progreso fina en un color semántico.13 variantes

SpinnerUn arco que gira para los estados de carga.9 variantes

Datos

Tablas, cifras y gráficos pequeños con los colores del tema.

8 componentes · 41 variantes

CifraUna cifra de dashboard con variación y minigráfico.6 variantes

DonaUn gráfico de dona con una etiqueta en el centro.5 variantes

FacepileAvatares de colaboradores superpuestos con +N.4 variantes

Gráfico de barrasUn gráfico de barras verticales con etiquetas.4 variantes

Grupo de ajustesUn bloque con título de filas de ajustes, para pantallas de ajustes.3 variantes

MinigráficoUn gráfico de líneas diminuto para tendencias.6 variantes

Resumen de cambios+12 −3 con bloques al estilo de GitHub.4 variantes

TablaUna tabla de datos con cabecera fija, ordenación y selección.9 variantes

Listas y menús

Filas, árboles de archivos, menús contextuales y secciones plegables.

7 componentes · 43 variantes

AcordeónSecciones plegables apiladas, como los paneles de una pantalla de ajustes.5 variantes

ÁrbolUn árbol de archivos plegable con iconos y colores de git.8 variantes

Cabecera de listaUn título pequeño de sección para listas, con hueco al final.3 variantes

DesplegableUna sección plegable con flecha.3 variantes

Fila de listaUna fila de lista con icono, texto y un hueco al final.13 variantes

Lista virtualNuevoUna lista que solo construye las filas visibles, para millones de elementos.3 variantes

MenúUn menú contextual con iconos, atajos y marcas.8 variantes

Navegación

Pestañas, migas de pan y barras de herramientas.

3 componentes · 17 variantes

Barra de herramientasLa barra bajo las pestañas: migas de pan y acciones.4 variantes

Barra de pestañasPestañas de editor con iconos, puntos de cambios y botón de cerrar.8 variantes

Migas de pansrc › main.rs › fn main, pulsables si quieres.5 variantes

Capas flotantes

Lo que se dibuja encima de la interfaz: capas, modales, paletas y notificaciones.

6 componentes · 27 variantes

BuscadorUna lista con búsqueda en una superficie flotante, con coincidencia difusa.4 variantes

CapaDibuja una capa encima de tu vista; al pulsar fuera se cierra.5 variantes

ModalUna superficie de diálogo con título, contenido y botones al pie.4 variantes

NotificaciónNotificaciones apiladas en la esquina inferior derecha.9 variantes

Paleta de comandosUna paleta de comandos con búsqueda difusa y atajos.3 variantes

PopoverContenido flotante en un punto: menús contextuales, selectores de color.2 variantes

Diálogos

Diálogos listos para usar con los botones traducidos.

7 componentes · 26 variantes

AlertaNuevoUn mensaje con un botón.6 variantes

Cambios sin guardarNuevo“¿Guardar los cambios antes de cerrar?”2 variantes

Capa de diálogoNuevoCentra un diálogo encima de tu vista con el fondo oscurecido.3 variantes

ConfirmaciónNuevoUna pregunta de sí o no, en rojo para acciones destructivas.4 variantes

Diálogo de errorNuevoQué salió mal, dónde y el traceback, con Copiar e Ir al origen.6 variantes

ElecciónNuevoUn mensaje con tus propios botones.2 variantes

PreguntaNuevoPide una línea de texto.3 variantes

Sistema

Piezas que hablan con el sistema operativo: sus diálogos de archivos y los archivos soltados desde el escritorio.

2 componentes · 14 variantes

Selector de archivosNuevoUn campo de ruta con un botón que abre el diálogo de archivos o carpetas del sistema.8 variantes

Zona para soltarNuevoUn área que recibe archivos arrastrados desde el escritorio o el explorador de archivos.6 variantes

Espacio de trabajo

El marco de una ventana estilo editor: docks, barra de título, barra de estado y paneles.

7 componentes · 35 variantes

Barra de estadoLa barra inferior: diagnósticos, posición del cursor, lenguaje.6 variantes

Barra de títuloLa barra superior con los selectores de proyecto y rama.6 variantes

Cabecera de panelIcono, título y acciones encima de un dock.4 variantes

DivisiónDos paneles con un divisor que se arrastra.3 variantes

Espacio de trabajoLa disposición de una ventana estilo editor: barra de título, docks, centro y barra de estado.5 variantes

Marco de ventanaNuevoTu propia barra de título, botones de ventana y menús.8 variantes

PanelUn panel lateral acoplable y redimensionable.3 variantes

Código y herramientas

El editor de código, una vista de terminal, una consola de registro y cajas de ayuda.

7 componentes · 28 variantes

Acerca deUna caja Acerca de con icono, versión, detalles y enlaces.3 variantes

AtajosUna lista de atajos agrupada y con búsqueda.2 variantes

ConsolaUn registro estilo dev tools con niveles, filtro, copiar y limpiar.3 variantes

EditorUn editor de código completo: resaltado, plegado, minimapa, marcas de git.9 variantes

MarkdownMuestra Markdown con los colores del tema.5 variantes

TerminalUna vista de terminal de solo lectura con colores ANSI.4 variantes

Visor de referenciaDocumentación integrada con buscador, como la de Godot: una lista de clases junto a la página abierta.2 variantes

Agentes de IA

Las piezas del chat y los ajustes de un agente de IA: llamadas a herramientas, diferencias, planes, historial e inicio de sesión.

9 componentes · 70 variantes

Aviso de inicio de sesiónNuevoPide iniciar sesión y luego muestra el paso del navegador, un código y Cancelar.7 variantes

Barra de cambiosNuevoLos archivos que cambió un agente, con Conservar todo y Rechazar todo.4 variantes

CatálogoNuevoCosas para instalar, con buscador e Instalar o Actualizar.5 variantes

Fila de servicioNuevoUna fila de ajustes para un servidor MCP, un agente o una skill: estado, interruptor y menú.10 variantes

Historial de hilosNuevoConversaciones pasadas, con búsqueda y agrupadas por día.5 variantes

Llamada a herramientaNuevoUn paso de un agente de IA: qué hizo, su resultado y Permitir o Rechazar.21 variantes

Medidor de contextoNuevoCuánto se llenó la ventana de contexto de un modelo: un anillo y 48k / 200k.8 variantes

PlanNuevoEl plan de un agente como una lista que se pliega.5 variantes

Vista de diferenciasNuevoUn cambio como líneas de colores: lo añadido en verde, lo quitado en rojo.5 variantes

Disposición

Los widgets de disposición de pyzed (pz.*) con los que se construye todo.

11 componentes · 57 variantes

ColumnaApila los hijos en vertical.6 variantes

ContenedorTamaño, relleno, alineación, fondo, borde y sombra para un hijo.7 variantes

CuadrículaNuevoColumnas iguales, o pistas como en CSS con expansión.5 variantes

DesplazableDesplaza el contenido que no cabe.2 variantes

Disposición ancladaNuevoPosiciones libres como en un diseñador de formularios, con anclas que siguen al redimensionar.10 variantes

EspacioHuecos fijos y separadores flexibles.3 variantes

FilaColoca los hijos en horizontal.8 variantes

FlexNuevoFlexbox de CSS: justify, align, gap, wrap y grow.8 variantes

PilaSuperpone los hijos; pin coloca uno en x, y.3 variantes

RedimensionableNuevoUn panel cuyo borde se arrastra para cambiar su tamaño.3 variantes

ResponsivoConstruye su contenido según el espacio disponible.2 variantes

Contenido

Widgets base para texto, iconos, imágenes, Markdown, códigos QR y dibujo.

9 componentes · 51 variantes

AnimaciónNuevoPresets, keyframes y transiciones para cualquier widget.

Código QRUn código QR para cualquier texto o URL.3 variantes

EfectosNuevoGlow, bloom, glass y opacidad como propiedades de estilo.6 variantes

IconoIconos de Lucide por nombre e imágenes SVG.9 variantes

ImagenImágenes con ajuste, opacidad y radio; un visor con zoom.6 variantes

LienzoDibujo 2D con formas, trazos, texto y eventos de ratón.6 variantes

ShaderNuevoUn widget pintado en la GPU por tu propio código WGSL.3 variantes

TextoUn texto con tamaño, color, fuente y peso.10 variantes

Texto enriquecidoUn bloque de texto que mezcla colores, pesos y enlaces.8 variantes