'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Componentes
Todos los componentes
Los componentes de Alea para React, según lo que hacen. Cada página tiene ejemplos en vivo, las props de los tipos, notas de accesibilidad y teclado, y su equivalente en Figma.
149 páginas
Acciones 7
- ButtonInicia una acción. Ocho variantes, seis tonos, cinco tamaños y tres formas; íconos, un atajo de teclado, carga con o sin texto, un estado de éxito, enlaces que se ven como botones y tamaños que cambian por breakpoint.
- IconButtonUn botón con solo un ícono, para barras de herramientas y lugares compactos. Necesita un aria-label.
- SegmentedControlUna opción entre dos y cinco, como una fila de píldoras. ToggleButton es la versión de un solo encendido o apagado.
- SelectionBarUna barra que aparece mientras hay elementos seleccionados: la cantidad, acciones sobre la selección y una forma de quitarla. Flotando abajo de la pantalla, o en línea sobre una lista o tabla.
- ButtonGroup, SplitButton y CompoundButtonBotones relacionados unidos en un solo control, y una acción principal con un menú de acciones relacionadas. CompoundButton es un botón alto con un título y una segunda línea, para pantallas de inicio y estados vacíos.
- ToggleGroup y ToolbarBotones de alternancia donde uno o varios pueden estar activos, y una barra de herramientas que es una sola parada de Tab con flechas adentro. Dale items a Toolbar y muestra lo que cabe y mueve el resto a un menú Más.
- HoldButtonMantener para confirmar: un relleno crece mientras se mantiene presionado, y la acción corre cuando se llena. Para acciones destructivas sin un diálogo.
Tipografía 4
- Heading y TextTítulos en Crimson Pro o Inter, texto con tonos, la etiqueta eyebrow, código en línea y teclas.
- LinkLleva a algún lugar. En el texto, independiente o atenuado, con los enlaces externos marcados.
- Blockquote y ListUna cita con su autor, y listas con estilo con viñetas, números o checks.
- ProseDa estilo a contenido largo que no controlas elemento por elemento: artículos, documentación, Markdown, HTML de un CMS.
Maquetación 12
- Stack, Inline, GridOrganiza el espacio con la escala: columnas, filas que saltan de línea, grillas responsive, el contenedor de página y divisores.
- CardEl panel de Alea: una superficie redondeada con un anillo suave. Versiones deep, outline e interactiva.
- AppShellEl marco de la app: un encabezado fijo, una barra lateral que se vuelve cajón en pantallas pequeñas, el área principal y un enlace para saltar.
- PageHeader y PageActionsLa parte superior de una página: ruta o volver, un título con imagen y datos, un subtítulo, la acción principal, acciones secundarias que se pliegan en un menú en teléfonos, y pestañas; fijo y compacto cuando lo necesites. PageActions cierra una página de formulario; FooterHelp lleva a la ayuda.
- SplitterDos paneles con un asa para cambiar su tamaño, arrastrando o con el teclado.
- Affix y FloatButtonMantén una barra a la vista una vez que llega arriba, y un botón flotante sobre la página. FloatButton puede llevar un texto (un botón flotante extendido) que se reduce al ícono al bajar con scroll, en dos tamaños y dos formas.
- AspectRatioMantiene el contenido multimedia en una proporción ancho-alto al cambiar de tamaño.
- ScrollAreaUna región con scroll, con barras finas según el tema y degradados que indican que hay más.
- Masonry e ImageListTarjetas de distintas alturas acomodadas en columnas, y galerías de imágenes con pie de foto.
- SpoilerContenido largo recortado a una altura con un degradado y Ver más.
- Diseño responsiveValores por breakpoint para columnas, spans, espacios y dirección, Show y Hide, y hooks para el breakpoint actual. Todo en CSS, así el servidor y el navegador muestran lo mismo.
- BentoGridUn diseño bento: tarjetas de distintos tamaños en una grilla pareja, con spans por breakpoint, un visual opcional y enlaces de tarjeta completa. Combina con el preset Graphite.
Formularios 29
- TextFieldCampo de texto con la etiqueta arriba o al lado, ayuda, advertencia y error, prefijo, sufijo y anexos, un botón para borrar, un contador de caracteres y un indicador de carga. Cuatro variantes y cinco tamaños que pueden cambiar por breakpoint. TextArea para textos largos, que crece si quieres.
- SearchField y PasswordFieldUn buscador con botón para borrar, una pista de tecla y estado de carga, y un campo de contraseña para mostrar u ocultar con medidor de seguridad. Mismas variantes y tamaños que TextField.
- NumberFieldNúmeros con botones a los lados o al final, límites, prefijo y sufijo, y formato según el idioma para moneda, porcentaje y unidades. Mismas variantes y tamaños que TextField.
- CheckboxUna casilla con estados marcado, indeterminado, inválido, solo lectura y deshabilitado; tres tamaños, relleno u outline, la etiqueta a cualquier lado; grupos desde items con un padre Seleccionar todo, en lista o como tarjetas.
- RadioUna opción de una lista corta: puntos, tarjetas o una fila unida de botones; tres tamaños, relleno u outline; opciones como hijos o items.
- SwitchUn ajuste de encendido y apagado que se aplica al instante: tres tamaños, la etiqueta a cualquier lado, textos cortos dentro del riel, íconos en el control y un estado de guardado.
- SelectElige una o varias opciones de una lista en un popover: búsqueda, borrar, etiquetas con +N, grupos, descripciones e íconos, un prefijo, estados de carga y vacío, una acción al pie y virtualización para listas largas. Mismas variantes y tamaños que TextField.
- SliderElige un valor o un rango arrastrando, con el valor visible y formateado.
- EmojiPickerElige un emoji: busca por nombre en inglés o español, salta por categoría, los recientes primero, y una grilla que recorres con las flechas.
- WheelPickerRuedas que giran para elegir, como el selector de un teléfono: una o varias columnas, columnas que dan la vuelta para horas y minutos, cinco o más filas visibles. Desliza, haz scroll, haz clic en una fila o usa las flechas.
- ListBoxUna lista de opciones para elegir, en la página en lugar de un popup: selección simple o múltiple, secciones, descripciones e íconos, un check a cualquier lado, escribir para saltar, scroll dentro de una altura.
- InputGroupUne campos, selects y botones en una fila con bordes compartidos: un monto y su moneda, una búsqueda y su botón, un protocolo y un dominio.
- ComboBox y TagFieldEscribe para filtrar y elegir una opción, o varias como etiquetas que se pueden quitar.
- Fechas y horasEscribe una fecha o elígela en un calendario, rangos, horas, todo en el idioma y el calendario de la persona.
- FormValidación al enviar, foco en el primer problema y errores del servidor en sus campos.
- FileUploadSuelta archivos o búscalos, con tamaños, progreso y errores en una lista.
- RatingEstrellas para calificar algo, o para mostrar una calificación.
- Selectores de colorElige un color por área, tono, hex o predefinidos, y revisa su contraste WCAG mientras eliges.
- OTPFieldCódigos de un solo uso en casillas separadas; pega el código completo de una vez.
- CascaderElige entre opciones anidadas columna por columna: país, luego ciudad.
- TreeSelectUn select cuyas opciones son un árbol, simple o múltiple.
- TransferMueve elementos entre dos listas, con búsqueda.
- MentionsUn área de texto donde @ sugiere personas para mencionar.
- AutocompleteBúsqueda con sugerencias: estáticas o cargadas mientras escribes, agrupadas, con coincidencias resaltadas y búsquedas recientes cuando está vacía.
- MultiSelectElige varias opciones con casillas; el disparador resume lo elegido. Incluye búsqueda, Seleccionar todo y Borrar.
- FieldsetAgrupa campos relacionados bajo una leyenda, con una descripción opcional, y puede deshabilitarlos todos.
- MarkdownEditorProEscribe Markdown con barra de herramientas y atajos, previsualízalo y muéstralo de forma segura en cualquier lugar.
- RichTextEditorProUn editor de texto enriquecido (WYSIWYG) con una barra que se colapsa a las herramientas más usadas: estilos y tamaños de texto, marcas, listas y listas de tareas, tablas editables, imágenes, buscar y reemplazar, y atajos de Markdown. El contenido pegado y el valor se limpian a un conjunto seguro de etiquetas.
- EditableTexto que se convierte en un campo al hacer clic: renombra un proyecto, un archivo, un título en el lugar.
Capas 11
- DialogUna tarea enfocada sobre la página. AlertDialog confirma algo que no se puede deshacer.
- DockedWindowUna ventana anclada abajo de la pantalla que sigue abierta mientras la gente trabaja: un mensaje que se está escribiendo, subidas en curso, un chat. Se minimiza a su barra, crece hasta casi toda la pantalla, y varias se ubican lado a lado.
- KeyboardShortcutsTodos los atajos de teclado de una app en un diálogo con búsqueda, que se abre con "?" desde cualquier lugar. La tecla modificadora principal se muestra como la de cada sistema (⌘ o Ctrl), y las secuencias se leen como "G luego I".
- ModalUn modal que contiene cualquier cosa: un formulario, una galería, un video, un asistente. Encabezado y pie opcionales, siete tamaños, centrado o arriba, scroll en el cuerpo o en todo el modal, multimedia a sangre y tres fondos.
- PopoverUn panel flotante junto a su disparador, para formularios pequeños y detalles extra.
- TooltipUna pista corta al pasar el mouse y con el foco del teclado. Los tooltips enriquecidos agregan un título en negrita; shortcut muestra la tecla.
- DrawerUn panel que entra desde un lado para filtros, detalles o navegación.
- Toggletip e InfoLabelUn botón pequeño de información que abre un popover al presionarlo, con título, texto y enlaces; tres íconos y dos tamaños. InfoLabel pone uno junto a la etiqueta de un campo.
- SheetUn panel que entra desde un borde y sigue al dedo: deslízalo para cerrarlo, o arrástralo entre puntos de anclaje. Desde abajo en teléfonos, centrado o desde un lado en escritorio, con un asa, un título, una descripción y acciones fijas.
- PopconfirmUna confirmación pequeña junto al botón que la pide, para acciones rápidas.
- HoverCardUna vista previa rica al pasar el mouse o con foco de teclado: perfiles, vistas previas de enlaces, definiciones.
Navegación 17
- TabsCambia entre vistas de lo mismo. Subrayado o píldoras, horizontal o vertical.
- AccordionSecciones que se abren y cierran con un cambio de altura suave: cuatro estilos (separated, joined, ghost, filled), tres tamaños, un indicador de flecha o más a cualquier lado, y un ícono, subtítulo y contenido extra en cada encabezado. Una o varias abiertas a la vez.
- BreadcrumbsDónde está la página: un rastro de enlaces hasta la página actual.
- PaginationRecorre páginas de resultados, con la parte media larga resumida.
- StepsAvance en una secuencia conocida: pasos listos, actual y pendientes, horizontal o vertical.
- MenuUna lista de acciones u opciones desde un botón: secciones, atajos, submenús y elementos marcables.
- CommandPaletteCada acción y página, al alcance del teclado con ⌘K.
- AnchorNavegación dentro de la página que sigue la sección que estás leyendo.
- ContextMenuUn menú que se abre donde se hace clic derecho, se mantiene presionado o se presiona Shift+F10.
- MenubarUna barra de menús de app de escritorio (Archivo, Editar, Ver) con el modelo de teclado completo de WAI-ARIA.
- NavigationMenuNavegación del sitio en dos orientaciones. Horizontal: una barra superior con paneles desplegables de enlaces (mega menús). Vertical: una barra lateral con grupos anidados que se abren en su lugar, títulos de sección, divisores, badges e íconos, un modo acordeón, tres tamaños y un riel colapsado de íconos con tooltips y menús flotantes.
- AppLauncherLa grilla de apps detrás de un botón en el encabezado, para saltar entre los productos de una suite.
- BottomNavigationLa barra de pestañas de una app móvil: de tres a cinco destinos con íconos, etiquetas y badges.
- BurgerEl botón de menú de tres líneas que se convierte en un ícono de cerrar.
- SkipLink y VisuallyHiddenEl primer enlace de la página salta la navegación; el texto oculto da a los lectores de pantalla el contexto que la pantalla ya muestra.
- CollapsibleUna sección que se abre y se cierra, más liviana que un acordeón: opciones avanzadas, detalles, una lista larga.
- NavbarUn encabezado de sitio con marca, enlaces (con mega menús) y acciones; por debajo de un breakpoint los enlaces pasan a un drawer detrás de la hamburguesa.
Datos 28
- BadgeEtiquetas pequeñas para estado, categoría y conteos.
- TagEtiquetas que se pueden quitar o elegir: filtros y valores escogidos.
- AvatarUna persona, como foto o iniciales sobre un degradado, con estado y grupos.
- PersonaUna persona de un vistazo: avatar con presencia, un nombre y hasta dos líneas más (cargo, estado), en cuatro tamaños, con el texto después o debajo del avatar y algo al final.
- ChatConversaciones: mensajes en burbujas o simples, rachas del mismo autor, separadores por día, una línea de Mensajes nuevos, estados de entrega, reacciones, enlaces a hilos, acciones al pasar el mouse y un indicador de escritura.
- CommentConversaciones: comentarios con autor, tiempo relativo (fecha completa al pasar el mouse), badges, notas de editado y restringido, estados de guardado y fallido, acciones, respuestas anidadas y un editor que crece y envía con ⌘Enter.
- MediaCard y CalloutCardTarjetas que empiezan con una imagen o ilustración: un título, texto y hasta dos acciones, que se pueden cerrar. MediaCard pone la imagen al lado del texto y la apila cuando la tarjeta es angosta, o arriba; CalloutCard sugiere un próximo paso.
- FilterBarFiltros para listas y tablas: vistas guardadas como pestañas, una búsqueda, filtros activos como chips que editas en un popover o quitas, un menú Agregar filtro, Quitar todo y espacio para ordenar o exportar. Filtros de una opción, varias opciones, texto y sí o no.
- StructuredListFilas de datos en columnas, más livianas que una tabla: comparaciones de planes, resúmenes de ajustes, especificaciones. Con selectionMode="single" cada fila es una opción. En teléfonos cada fila apila sus celdas con sus etiquetas.
- ContainedListUna lista con título en su propio contenedor, con una acción: miembros, archivos recientes, integraciones. Las filas llevan un ícono o avatar, una descripción y acciones; tres tamaños de fila; una tarjeta o una versión plana para paneles.
- Arrastrar y soltarArrastra para reordenar filas, moverlas entre listas, reorganizar una grilla de tarjetas o las filas de una tabla, con asas, líneas de destino y los mismos movimientos desde el teclado y los lectores de pantalla. Tree, Kanban y las zonas para soltar archivos usan el mismo sistema.
- TableFilas y columnas con orden, selección de filas, encabezado fijo, columnas que cambian de ancho, variantes con franjas y con bordes, tarjetas en móvil, virtualización y un estado vacío.
- ListViewUna lista de elementos con detalle para elegir, abrir o usar.
- TreeElementos anidados que se abren y cierran: archivos, categorías, permisos, organigramas. Tres tamaños, líneas guía, modo directorio, selección simple o múltiple, casillas en cascada, carga diferida, filtro, arrastrar y soltar, renombrar, filas con detalle, secciones y virtualización.
- Descriptions y StatisticPares de clave y valor, y números grandes con su cambio.
- TimelineEventos en orden: un registro de cambios, el avance de un pedido, un feed de actividad.
- CarouselDiapositivas que deslizas o recorres, con puntos y una reproducción automática que se puede detener. PageIndicator muestra la posición por sí solo: puntos, barras o números.
- MediaPlayerProVideo y audio con controles al estilo Alea: reproducir, buscar con indicador de tiempo, retroceder y adelantar, volumen, velocidad, subtítulos, imagen en imagen y pantalla completa, con las teclas que la gente ya conoce.
- ImageImágenes diferidas con un brillo de carga, un respaldo y una vista previa con zoom.
- QRCodeUn código QR dibujado en SVG, con un logo opcional.
- CalendarViewProUn mes de eventos, como un calendario de pared.
- SchedulerProVistas de día y semana con una cuadrícula horaria: eventos ubicados por hora y lado a lado cuando se superponen, una fila de todo el día, la hora actual, un selector de periodo, un cambio de vista y eventos nuevos con un clic o un botón.
- DataGridProUna grilla de datos completa: búsqueda, filtros por columna, orden, visibilidad de columnas, columnas fijas, densidad, selección con acciones masivas, edición en línea, filas expandibles, datos en árbol, fila de resumen, carga, paginación o virtualización, y exportación a CSV.
- SortableList y KanbanBoardProReordena elementos, o mueve tarjetas entre columnas, arrastrando o con el teclado.
- VirtualListProUna lista que solo muestra lo que está en pantalla, para miles de filas.
- Ribbon e IndicatorUna etiqueta en la esquina de una tarjeta, y un punto o número en la esquina de un avatar o ícono.
- Countdown y FormattedNumberEl tiempo que falta hasta un momento, y números con el formato de quien lee: moneda, porcentaje, compacto.
- Status y ColorSwatchUn punto de color con palabras para la salud de un servicio o la presencia, y una muestra de color con su nombre.
Gráficos 12
- LineChart y AreaChartProValores en el tiempo, suaves o rectos, con áreas, apilado, un tooltip y una vista de tabla de datos.
- BarChartProCompara categorías: agrupadas o apiladas, verticales u horizontales, con valores en las barras.
- PieChart y DonutChartProPartes de un todo, con la proporción de cada porción en la leyenda y el total en el centro.
- Scatter, Radar y HeatmapProCómo se relacionan dos medidas, varias medidas a la vez, e intensidad en una grilla.
- ComboChartProBarras y líneas en los mismos ejes: montos con una tendencia o una tasa, como ingresos y pedidos.
- FunnelChartProCuántos pasan cada paso, con la proporción conservada desde el primero y desde el anterior.
- WaterfallChartProCómo un monto inicial llega a uno final: cada cambio sube o baja desde el total acumulado, y los totales parten del piso.
- BulletChartProReal contra meta sobre rangos malo, regular y bueno: muchos KPI en poco espacio.
- TreemapProPartes de un todo cuando son muchas: cada mosaico tiene el tamaño de su proporción, acomodado para seguir cuadrado.
- RadialBarChartProAlgunas medidas como anillos concéntricos, cada una sobre su propio máximo: metas, cuotas, avance.
- CalendarHeatmapProActividad por día a lo largo de un año, como un gráfico de contribuciones: rachas y semanas tranquilas de un vistazo.
- Sparkline y GaugeProUna pequeña línea de tendencia para tablas y tarjetas de estadísticas, y un medidor de media circunferencia para una medida.
Avisos 9
- AlertUn mensaje en la página: info, éxito, advertencia o peligro, con acciones.
- ToastUn mensaje breve que confirma que algo pasó, con una acción opcional como Deshacer.
- Progress y MeterCuánto avanza una tarea, y cuánto de algo se usa.
- Spinner y SkeletonEstados de espera: un spinner para esperas cortas, skeletons para contenido que viene en camino. InlineLoading es una línea de estado que pasa de un spinner a un check o un error.
- SaveBar y TopLoadingBarSaveBar aparece mientras un formulario tiene cambios sin guardar, con Guardar y Descartar y ⌘S para guardar. TopLoadingBar es una línea fina de progreso arriba de la ventana mientras carga una página.
- EmptyState y ResultQué mostrar cuando todavía no hay nada, y el resultado de un flujo o una página.
- TourUn recorrido guiado por una pantalla, un foco a la vez.
- LoadingOverlayCubre una región mientras carga, mantiene el diseño en su lugar y avisa a los lectores de pantalla que está ocupada.
- BannerUna barra de anuncios de todo el sitio sobre el encabezado: lanzamientos, ofertas, mantenimiento.
Efectos 13
- Glass y LiquidGlassProEl vidrio esmerilado es gratis (Card variant="glass", surface="glass" en el ThemeProvider); LiquidGlass en Pro curva lo que tiene detrás en los bordes, con un borde especular.
- GooeyProFormas que se funden como líquido: un selector de píldoras cuya selección fluye al siguiente elemento, un botón del que gotean sus acciones, y el filtro para tus propias formas.
- BorderBeam y SpotlightProUna luz que recorre el borde de una tarjeta destacada, y una luz suave que sigue al puntero sobre una superficie.
- Tilt y MagnetProUna tarjeta de muestra se inclina en 3D hacia el puntero con un reflejo; una llamada a la acción se acerca al puntero cuando está cerca.
- FondosProCampos de color aurora, patrones de puntos y líneas, grano para degradados, y un desenfoque progresivo en los bordes de scroll.
- Efectos de textoProBrillo (lineal u orgánico), texto que se revuelve, máquina de escribir, palabras que rotan, un resaltador que se dibuja detrás de una frase, palabras que se iluminan al hacer scroll, y títulos bañados de aurora.
- Burst y MarqueeProUna pequeña ráfaga de chispas para un éxito real, y un bucle de logos o citas que se pausa con el mouse encima.
- LikeButton y confetiProUn botón de me gusta cuyo corazón se llena y estalla en partículas, y confeti con gravedad para los grandes momentos.
- CardStack, FlipCard y bordesProTarjetas que se apilan y se abren en abanico, una tarjeta que gira para mostrar su reverso, un borde con degradado que gira para la destacada, y un brillo alrededor de un botón premium.
- Meteoros, ondas, mancha y destellosProMovimiento tranquilo para heroes y estados vacíos: meteoros, anillos de onda, una mancha que cambia de forma, destellos alrededor de una palabra y una grilla que se ilumina bajo el puntero.
- OrbitingCircles y AnimatedBeamProMuestra qué se conecta con qué: íconos que giran alrededor de un centro (integraciones), y una luz que viaja por una curva de un elemento a otro (flujo de datos).
- DockProUna fila de botones de ícono que crecen cuando se acerca el puntero, como un dock de escritorio: un lanzador de apps divertido o una barra de herramientas flotante.
- Efectos de imagenProCompara antes y después con un asa, amplía detalles con una lupa, revela una imagen generada desde el ruido, y deshaz una eliminada en humo.
IA 3
- PromptInputEl cuadro de mensaje de un asistente: crece con el texto, Enter envía, el botón Enviar se vuelve Detener mientras se genera una respuesta, y las sugerencias dan un punto de partida.
- Partes de una respuesta de IALo que rodea a una respuesta: el razonamiento detrás, las herramientas que usó un agente, las fuentes con citas en el texto, y acciones para copiarla, regenerarla y calificarla.
- AIOrbUn orbe de degradado vivo para un asistente: deriva en reposo, respira mientras escucha, gira mientras piensa y late mientras habla.
Extras 4
- CodeBlock, CopyButton, SplitTextCódigo con botón de copiar, un botón de copiar para cualquier valor y un titular que entra palabra por palabra. CodeSnippet copia un comando o un valor en línea; CodeBlock resalta líneas, ajusta el texto y corta el código largo con Ver más.
- WatermarkUn texto tenue repetido sobre el contenido: borradores y vistas previas confidenciales.
- ThemeProvider e interruptorOscuro, claro o del sistema, recordado, con un interruptor en dos estilos.
- Degradados y orbesLos toques de Alea: texto con degradado, el punto con degradado y el fondo de orbes que flotan.