Alternativas de interfaz de usuario sin interfaz: Radix Primitives, React Aria, Ark UI

Usar bibliotecas de componentes de React es una forma popular de crear rápidamente aplicaciones React. Los componentes de este tipo de biblioteca ofrecen numerosas ventajas. En primer lugar, cumpla con las directrices de accesibilidad como WAI-ARIA, lo que garantiza que sean fáciles de usar. En segundo lugar, incorporan estilos y diseño para que los desarrolladores puedan centrarse en otros aspectos de sus aplicaciones. En tercer lugar, muchas de ellas tienen comportamientos predefinidos (por ejemplo, opciones de filtrado de componentes con autocompletado según la entrada del usuario) que ahorran tiempo y esfuerzo en comparación con crear desde cero.

Los componentes de las bibliotecas de componentes de React también están optimizados para un mejor rendimiento. Dado que una gran comunidad u organización suele mantenerse, esto garantiza actualizaciones periódicas y el cumplimiento de las prácticas de programación más eficientes. Algunos ejemplos de estas bibliotecas son Material UI, Chakra UI y React Bootstrap.

Sin embargo, el margen para personalizar los componentes de estas bibliotecas es limitado. Normalmente, se pueden realizar pequeños cambios en los componentes, pero no se puede modificar su sistema de diseño subyacente. Un desarrollador podría querer usar una biblioteca de componentes porque gestiona la accesibilidad y añade funcionalidad a su aplicación, pero también podría necesitar que esos componentes sigan un sistema de diseño personalizado.

Las bibliotecas de componentes headless (sin estilo) se diseñan para cubrir esta necesidad. Una biblioteca de componentes headless es una biblioteca de interfaz de usuario que ofrece componentes completamente funcionales sin estilo. Con componentes headless, el desarrollador que los utiliza puede aplicar el estilo que considere oportuno.

La biblioteca de interfaz de usuario sin interfaz gráfica (UI) más popular en el momento de escribir este artículo es, por supuesto, Headless UI. Si bien Headless UI cubre esta brecha de diseño, este artículo explicará por qué Headless UI no siempre es la mejor opción presentando tres bibliotecas alternativas para componentes sin estilo: Radix Primitives, React Aria y Ark UI.

Prerrequisitos

Para seguir esta guía, necesitará conocimientos básicos de HTML, CSS, JavaScript y React.

¿Por qué no utilizar simplemente una interfaz de usuario sin cabeza?

Headless UI es una biblioteca de componentes React sin estilos, desarrollada por Tailwind Labs, creadores de Tailwind CSS. Su sitio web afirma que la biblioteca está “diseñada para integrarse a la perfección con Tailwind CSS”. Como se mencionó anteriormente, Headless UI es la más popular de su categoría, con 25000 estrellas en GitHub y 1,35 millones de descargas semanales en npm.

Sin embargo, Headless UI tiene una cantidad limitada de componentes sin estilo: al momento de escribir este artículo, solo ofrece 16 componentes principales. Todas las demás bibliotecas que se describen en este artículo ofrecen muchos más componentes para cubrir más casos de uso. Además, algunas de las bibliotecas que abordaremos en las siguientes secciones ofrecen componentes y funciones útiles que Headless UI no ofrece.

¡Veamos estas alternativas!

Primitivas de base

Radix Primitives es una biblioteca de componentes React sin estilo, creada por el equipo de Radix UI. Esta biblioteca cuenta con componentes totalmente estilizados y personalizables. Según su sitio web, los equipos de Node.js, Vercel y Supabase utilizan Radix Primitives. La biblioteca cuenta con 14.800 estrellas en GitHub.

Puedes aplicar estilo a los componentes de Radix Primitives con cualquier solución de estilo que elijas, como CSS, Tailwind CSS o incluso CSS-in-JS. Los componentes también admiten la renderización del lado del servidor. Y lo que es más importante, Radix Primitives cuenta con una buena documentación para cada componente sin estilo que ofrece, que explica cómo usarlos en los proyectos.

Instalación y uso de Radix Primitives

A continuación, se detallan los pasos para instalar y usar Radix Primitives. Este ejemplo importa un componente de cuadro de diálogo de la biblioteca y lo aplica con CSS estándar.

Primero, inicie un proyecto React usando un marco de su elección o abra un proyecto React existente.

Luego, instala el componente Radix Primitive que necesitas. La biblioteca pública contiene componentes como paquetes que puedes agregar a tu aplicación. Para este ejemplo, instale el Dialogcomponente:

npm install @radix - ui / react - diálogo

A continuación, cree un archivo para importar y personalizar el componente sin estilo para su aplicación:

// RadixDialog.jsximportar * como Diálogo desde '@radix-ui/react-dialog' ; importar './radix.style.css'; función RadixDialog() { return ( Dialog . Root Dialog . Trigger className = 'btn primario-btn' Radix Dialog / Dialog . Trigger Dialog . Portal Dialog . Overlay className = 'dialog-overlay' / Dialog . Content className = 'dialog-content' Dialog . Title className = 'dialog-title' Confirmar eliminación / Dialog . Título Dialog . Descripción className = ' dialog - body ' ¿Está seguro de que desea eliminar permanentemente este archivo exportar RadixDialog predeterminado?                                                                                                                                                                          

A continuación, vamos a darle estilo al componente:

/* base.estilo.css */.btn { padding: 0.5rem 1.2rem; radio fronteriza: 0,2rem; borde: ninguno; cursor: puntero; }.primary-btn { color de fondo: #1e64e7; color: blanco; caja-sombra: rgba(0, 0, 0, 0.2) 0px 2px 10px; }.red-btn { color de fondo: #d32f2f; color: #ffffff; caja-sombra: rgba(0, 0, 0, 0.2) 0px 2px 10px; }.dialog-overlay {color de fondo: rgba(0, 0, 0, 0.4); posición: fija; recuadro: 0; animación: overlayAnimation 200ms cúbico-bezier (0.19, 1, 0.22, 1); } . contenido de diálogo {color de fondo: blanco; posición n : fija ; radio-borde: 0,2rem; superiores: 50 %; izquierda: 50%; traducir : - 50 % - 50 %; ancho: 90vw; ancho máximo: 450px;​ relleno: 2,5 rem; caja-sombra: rgba (50, 50, 93, 0.25) 0px 2px 5px-1px, rgba (0, 0, 0, 0.3) 0px 1px 3px-1px; } .di á logo - título í tulo { tamaño de fuente : 1.1rem ; relleno inferior: 0,5rem; borde - inferior : 3px sólido #dfdddd ; margen-inferior: 1rem; } .di á logo - cuerpo { margen - inferior : 3rem ; } .inferior - btns { visualización : flex ;​ justificar - contenido : flex - fin ; } .inferior - btns .btn : ú último - hijo { visualización : bloque en línea ;​ margen - izquierda : 1rem ; ​​​​​} @ keyframes overlayAnimation { de { opacidad : 0 ; } a { opacidad : 1 ; } }                                                    

Por último, exporta y renderiza el componente en el DOM.

Aquí está la demostración de la interfaz de usuario del componente de diálogo que diseñamos anteriormente:

Ventajas y desventajas de las primitivas de radix.

Como todas las bibliotecas sin interfaz gráfica que se describen en esta guía, Radix Primitives tiene muchas ventajas y desventajas. Algunas de ellas son:

• Ofrece 28 componentes principales, que son muchos más de los que ofrece Headless UI.
• Los desarrolladores pueden instalar componentes individualmente, lo que significa que puede adoptar Radix Primitives de forma incremental instalando solo las partes necesarias.
• Ofrece una propiedad llamada asChild, que permite a un desarrollador cambiar el elemento DOM predeterminado de un componente Radix, un proceso que se conoce como Composición.

Algunas desventajas de Radix Primitives incluyen:

• Puede resultar complicado instalar todos los componentes necesarios individualmente a través de npm
• Se necesita tiempo para familiarizarse con la anatomía de los componentes de esta biblioteca.

Reaccionar Aria

React Aria es una biblioteca de componentes sin estilo que Adobe lanzó bajo su colección de herramientas de interfaz de usuario de React, React Spectrum. Adobe no cuenta con un repositorio dedicado a React Aria, pero el repositorio de React Spectrum contaba con 12000 estrellas en GitHub al momento de escribir este artículo. Su paquete npm, react-aria-components, también recibe actualmente 260000 descargas semanales.

React Aria permite a los desarrolladores aplicar estilos a sus componentes con cualquier método. También pueden instalar los componentes individualmente en esta biblioteca mediante ganchos de React Aria.

Instalación y uso de React Aria

Demostraremos cómo crear otro cuadro de diálogo, pero esta vez usaremos React Aria. Este cuadro de diálogo usará un estilo similar al del ejemplo de primitivas de base.

Primero, inicia una nueva aplicación de React o abre un proyecto existente. Luego, usa tu gestor de paquetes preferido para instalar la biblioteca de componentes con el comando.npm install react-aria-components

A continuación, importe los componentes sin estilo necesarios para crear lo que desee. En este caso, el ejemplo muestra la creación de un cuadro de diálogo:

// AriaDialog.jsximportar { Botón , Diálogo , DialogTrigger , Encabezado , Modal , ModalOverlay } de 'react-aria-components'; importar './aria.style.css' función AriaDialog() { return ( DialogTrigger Botón className = 'btn primaria-btn' React Aria Dialog / Bot ó n ModalOverlay isDismissable Modal Dialog { ( { close } ) = ( Header slot = ' title ' Confirmar eliminación / Header p className = ' dialog - body ' ¿ Está seguro de que desea eliminar permanentemente este archivo ? / p div className = 'bottom-btns' Bot ó n className = ' btn' onPress = { close } Cancelar / Bot ó n Bot ó n className = ' btn red - btn' onPress = { close } Eliminar para siempre / Bot ó n / div / ) } / Dialog /Modal / ModalOverlay / DialogTrigger ) } exportar valor predeterminado AriaDialog                                                                                                                                                                                                                                      

Ahora, aplicaremos estilo al componente. React Aria ya cuenta con clases integradas que puedes usar en CSS, incluyendo . También puedes sobrescribir las clases integradas con clases personalizadas, como la de este ejemplo:.react-aria-Button.btn

/* aria.style.css */. btn { padding : 0.5rem 1.2rem ; border - radio : 0.2rem ; border : none ; cursor : puntero ; } . primary - btn { background - color : #1e64e7 ; color : blanco ; box - sombra : rgba ( 0 , 0 , 0 , 0.2 ) 0px 2px 10px ; } . red - btn { background - color : #d32f2f ; color : #ffffff ; box - sombra : rgba ( 0 , 0 , 0 , 0.2 ) 0px 2px 10px ; } . reaccionar - aria - ModalOverlay { color de fondo : rgba ( 0 , 0 , 0 , 0.4 ); posición: fija; inserción n : 0 ; animación: superposiciónAnimación 200ms cúbico-bezier (0.19, 1, 0.22, 1);​ visualización: flex;​ justificar-contenido: centrar; elementos-alineales: centrar; } . reacción-aria-Diálogo { fondo-color: blanco; radio-borde: 0,2rem; ancho: 90vw; ancho máximo: 450px; relleno: 2,5 rem; caja-sombra: rgba (50, 50, 93, 0.25) 0px 2px 5px-1px, rgba (0, 0, 0, 0.3) 0px 1px 3px-1px; contorno : ninguno ; } . reaccionar-aria-Diálogo. reacción-aria-Encabezado {tamaño de fuente: 1.1rem; relleno inferior: 0,5rem; borde - inferior : 3px sólido #dfdddd; margen-inferior: 1rem; } . diálogo-cuerpo { margen-inferior: 3rem; } . inferior - btns { visualización : flex ; justificar-contenido: flex-fin; } . inferiores-btns. btn:último-niño {display:inline-block; margen izquierdo: 1rem; } @keyframes overlayAnimation { de { opacidad : 0 ; } a { opacidad : 1 ; } }         

Por último, exporta el componente y renderízalo en el DOM.

Aquí está la salida del cuadro de diálogo en este ejemplo:

Ventajas y desventajas de React Aria

Algunas de las ventajas de usar React Aria incluyen:

• Ofrece ganchos para componentes individuales, lo que puede ser muy útil para la adopción incremental.
• Ofrece 43 componentes principales.
• Todos sus componentes tienen clases integradas. Esto resulta útil al aplicar estilos, ya que no es necesario crear nuevas clases en el marcado.

Aquí hay algunas desventajas de usar React Aria:

• Algunos componentes requieren un poco más de configuración de código para funcionar correctamente. Por ejemplo, en el cuadro de diálogo, tuvimos que desestructurar la closefunción y luego usarla para cerrar el cuadro. Este tipo de funcionalidad está integrada en una biblioteca como Radix.
• Para que un componente funcione correctamente, es necesario combinar varios componentes de Ark UI. Por ejemplo, tuvimos que combinar Button, Dialog, DialogTrigger, Heading, Modaly ModalOverlaysimplemente para que funcione un cuadro de diálogo. Algunos componentes no funcionan solos. Al principio, esto puede resultar abrumador y requiere tiempo acostumbrarse.

Interfaz de usuario de Ark

Ark UI es una biblioteca de componentes sin estilo que funciona en React, Vue y Solid. Chakra Systems, el equipo detrás de Chakra UI, también es el equipo detrás de Ark UI. Al momento de escribir este artículo, Ark UI tiene 3300 estrellas en GitHub y recibe 38000 descargas semanales en npm.

Al igual que Radix Primitives y React Aria, con Ark UI puedes aplicar estilo a los componentes headless con el método que prefieras (CSS, Tailwind CSS, Panda CSS, componentes con estilo, etc.). Ark UI también es una de las pocas bibliotecas de componentes sin estilo compatibles con varios frameworks.

Instalación y uso de Ark UI

Nuevamente, crearemos otro cuadro de diálogo, esta vez con Ark UI y le daremos estilo usando CSS simple.

Como siempre, crea un nuevo proyecto de React o abre uno existente. Luego, instala el paquete Ark UI para usar Reactnpm install @ark-ui/react

A continuación, importe y utilice los componentes sin estilo de Ark UI. Aquí se muestra la estructura de un cuadro de diálogo en Ark UI:

// ArkDialog.jsximport { Diálogo, Portal } from '@ark-ui/react'import './ark.style.css'function ArkDialog() { return ( Dialog.Root Dialog.Trigger className='btn primario-btn'Ark UI Dialog/Dialog.Trigger Portal Dialog.Backdrop / Dialog.Positioner Dialog.Content Dialog.TitleConfirmar eliminación/Dialog.Title Dialog.Description¿Está seguro de que desea eliminar permanentemente este archivo?/Dialog.Description div className='bottom-btns' Dialog.CloseTrigger className='btn'Cancelar/Dialog.CloseTrigger Dialog.CloseTrigger className='btn red-btn'Eliminar para siempre/Dialog.CloseTrigger /div /Dialog.Content /Dialog.Positioner /Portal /Dialog.Root )}exportar ArkDialog predeterminado

Ahora, puedes darle estilo al componente usando cualquier método que elijas:

/* ark.style.css */.btn { relleno: 0.5rem 1.2rem; radio del borde: 0,2rem; borde: ninguno; cursor: puntero;}.primary-btn { color de fondo: #1e64e7; color: blanco; sombra de caja: rgba(0, 0, 0, 0.2) 0px 2px 10px;}.red-btn { color de fondo: #d32f2f; color: #ffffff; sombra de caja: rgba(0, 0, 0, 0.2) 0px 2px 10px;}[alcance de datos=diálogo][parte de datos=fondo] { color de fondo: rgba(0, 0, 0, 0.4); posición: fija; recuadro: 0; animación: backgroundAnimation 200ms cubic-bezier(0.19, 1, 0.22, 1);}[alcance de datos=diálogo][parte de datos=posicionador] { posición: fija; superior: 50%; izquierda: 50%; trasladar: -50% -50%; ancho: 90vw; ancho máximo: 450px;}[alcance de datos=diálogo][parte de datos=contenido] { color de fondo: blanco; relleno: 2,5 rem; radio del borde: 0,2rem; sombra de caja: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}[alcance de datos=diálogo][parte de datos=título] { tamaño de fuente: 1.1rem; relleno inferior: 0,5rem; borde inferior: 3px sólido #dfdddd; margen inferior: 1rem;}[alcance de datos=diálogo][parte de datos=descripción] { margen inferior: 3rem;}.bottom-btns { visualización: flex; contenido de justificación: flex-end;}.bottom-btns .btn:last-child { visualización: bloque en línea; margen izquierdo: 1rem;}@keyframes contextoAnimation { de { opacidad: 0; } a { opacidad: 1; }}

Finalmente, exporta el nuevo componente y renderízalo en tu página. A continuación se muestra el resultado del ejemplo de código:

Ventajas y desventajas de Ark UI

Los siguientes son algunos beneficios de usar Ark UI:

• Tiene 34 componentes principales.
• Tiene algunos componentes útiles que son difíciles de implementar desde cero, incluido un carrusel y una barra de progreso circular, que otras bibliotecas no tienen.
• Al igual que Radix Primitives, Ark UI admite la composición de componentes. También lo hace mediante la asChildpropiedad

Una desventaja de usar Ark UI es que no cuenta con clases integradas como React Aria. En su lugar, se recomienda aplicar estilo a los componentes mediante atributos de datos integrados, que consisten principalmente en data-scopey data-part. Aquí hay un ejemplo:

[data-scope=dialog][data-part=posicionador] { posición: fija; superior: 50%; izquierda: 50%; traducir: -50% -50%; ancho: 90vw; ancho máximo: 450px;}

Usar este método de estilo no es común y llevará tiempo acostumbrarse. Sin embargo, un desarrollador que no se sienta cómodo con este método puede crear clases personalizadas para los componentes que usan className. Estas clases personalizadas se dirigen a data-part, a las que el desarrollador puede aplicar estilos fácilmente (sin necesidad de incorporar data-scope). Aquí hay un ejemplo:

. primario - btn { color de fondo : #1e64e7 ; color: blanco; cuadro de sombra : rgba ( 0 , 0 , 0 , 0.2 ) 0px 2px 10px ; }              

Comparación de las bibliotecas de componentes sin estilo

A continuación se muestra una tabla que compara las tres bibliotecas de componentes sin estilo analizadas en este artículo:

Conclusión

Esta guía explica por qué los desarrolladores deben considerar el uso de bibliotecas de componentes sin estilo además de la interfaz de usuario sin interfaz gráfica. Se analizaron tres bibliotecas en detalle, cada una con patrones únicos que los desarrolladores frontend deben conocer. En general, todas cumplen la función de bibliotecas de componentes sin estilo: Radix Primitives permite a los desarrolladores instalar componentes individualmente, lo cual es especialmente útil si solo se necesitan unos pocos; React Aria funciona bien en cualquier proyecto React; y Ark UI puede usarse incluso en frameworks distintos de React.

Existen otras bibliotecas de componentes sin estilo de React que no se han abordado en este artículo, como Base UI (del equipo de Material UI), Reach UI (del equipo de React Router) y muchas más. Sin duda, estas bibliotecas resuelven problemas importantes para los desarrolladores, y su uso no parece estar de moda en el futuro próximo.

Empieza ahora

Si quieres conocer otros artículos parecidos a Alternativas de interfaz de usuario sin interfaz: Radix Primitives, React Aria, Ark UI puedes visitar la categoría Guias.