Las 4 mejores bibliotecas de componentes sin estilo para crear aplicaciones React personalizables

Puede utilizar bibliotecas de componentes que proporcionan elementos prediseñados y con estilo para simplificar el proceso de desarrollo de aplicaciones React. Estas bibliotecas pueden ahorrar mucho tiempo y esfuerzo, pero también pueden limitar su control sobre el estilo de su aplicación. Si necesita más control sobre el estilo de sus aplicaciones React, considere usar una biblioteca de componentes sin estilo.

¿Qué son las bibliotecas de componentes sin estilo?

Componente sin estilo Las bibliotecas se utilizan para desarrollar aplicaciones React accesibles.. Son colecciones de componentes de UI reutilizables sin estilos predefinidos. Le proporcionan la estructura básica de los elementos de la interfaz de usuario sin ningún estilo. Esto le brinda control total sobre cómo se ven y se sienten sus componentes.

Beneficios de las bibliotecas de componentes sin estilo

Estos son algunos de los beneficios de utilizar bibliotecas de componentes sin estilo:

• Control total sobre el estilo: Las bibliotecas de componentes sin estilo le brindan control total sobre el aspecto de sus componentes. Puede utilizar cualquier CSS o marco de estilo para personalizar los componentes y adaptarlos a sus necesidades.
• Acelerar el desarrollo: Las bibliotecas de componentes sin estilo pueden ayudarte a acelerar el desarrollo al proporcionar un conjunto de componentes prediseñados que puedes usar en tu aplicación.
• Facil de mantener: Las bibliotecas de componentes sin estilo son fáciles de mantener porque no están estrechamente acopladas a ningún marco de estilo específico. Esto significa que puede actualizar fácilmente el estilo sin realizar cambios en el código subyacente.

Radix UI es una biblioteca de componentes sin estilo que se centra en la accesibilidad. Proporciona un conjunto de componentes de interfaz de usuario diseñados para ser accesibles a todos los usuarios. Puede cree hermosas aplicaciones React usando Radix UI.

Cuando trabaja con Radix UI, puede instalar los componentes individuales que necesita en lugar de toda la biblioteca. Esto garantiza que su aplicación sea liviana.

Por ejemplo, si solo necesita un componente de acordeón, puede instalarlo en su aplicación ejecutando el siguiente comando:

npm install @radix-ui/react-accordion

Después de instalar el componente de acordeón, puedes crear acordeones en tu aplicación React.

A continuación se muestra un ejemplo de cómo utilizar el componente de acordeón:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

El bloque de código anterior configura un componente básico de acordeón sin estilo usando el @radix-ui/react-acordeón biblioteca, lo que permite elementos plegables con contenido personalizable.

El código generará un acordeón parecido a este:

La biblioteca React Aria es un conjunto de enlaces para crear interfaces de usuario en React. La biblioteca facilita la creación de aplicaciones web accesibles al proporcionar una colección de componentes que siguen las mejores prácticas de accesibilidad.

Adobe desarrolló y mantiene la biblioteca React Aria. La biblioteca es parte del sistema de diseño Adobe Spectrum más extenso, que proporciona un conjunto completo de pautas de diseño y recursos para crear interfaces de usuario accesibles. Los elementos proporcionados por la biblioteca React Aria no tienen estilo, lo que le permite personalizar los elementos para que se ajusten a sus necesidades.

Para usar React Aria en su aplicación React, instálelo ejecutando el siguiente comando:

npm install react-aria

A continuación se muestra un ejemplo de cómo crear un componente de botón utilizando el utilizar botón gancho:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Ahora puedes importar y renderizar el botón componente en cualquier otro componente que elija.

Por ejemplo:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Cuando renderices el bloque de código anterior, generará un botón simple que se ve así:

Si no se siente cómodo usando React Aria debido a los ganchos, use el Reaccionar componentes de Aria biblioteca en su lugar. Esta biblioteca proporciona componentes prediseñados a los que se puede acceder de forma predeterminada. Es una capa delgada encima de la biblioteca React Aria. Los componentes proporcionados no tienen estilo, por lo que las dos bibliotecas son muy similares.

Base UI es una biblioteca de React UI sin estilo que proporciona componentes de UI sin estilo. El equipo de Material UI creó Base UI con un conjunto de componentes fundamentales que puede usar para crear sus propias aplicaciones React personalizadas. Basaron la biblioteca Base UI en el mismo ingeniería robusta como Material UI, pero Base UI no implementa Material Design.

Puede instalar Base UI en su aplicación React con este comando:

npm install @mui/base

Base UI proporciona componentes sobre la marcha, lo que significa que puede importar y utilizar componentes directamente desde la biblioteca. También proporciona enlaces que puede utilizar para crear y configurar sus componentes.

A continuación se muestra un ejemplo del uso de componentes de la interfaz de usuario base:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

Este código genera un botón simple usando el Botón componente de la biblioteca Base UI. También puedes utilizar el utilizar botón gancho para realizar la misma tarea.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

El utilizar botón gancho y el Botón El componente generará un botón sin estilo, como se muestra en la imagen a continuación.

Otra biblioteca que puede explorar es Headless UI, que ofrece elementos de UI sin estilo, lo que le brinda la libertad de personalizar la apariencia y el comportamiento de sus componentes de UI como mejor le parezca.

Puede instalar la biblioteca usando el siguiente comando:

npm install @headlessui/react

Después de instalar la biblioteca, puede utilizar los diversos componentes que proporciona la biblioteca en su aplicación React.

Por ejemplo:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

En este ejemplo, creará una ventana emergente usando el popover componente de la biblioteca Headless UI. El bloque de código anterior generará una ventana emergente similar a esta.

Obtenga control total con componentes sin estilo

Las bibliotecas de componentes sin estilo le brindan control total sobre el estilo de su aplicación React, lo que le permite crear experiencias de usuario únicas. Estas bibliotecas ofrecen una variedad de opciones que se adaptan a sus necesidades. Puede crear aplicaciones React visualmente atractivas y altamente personalizables aprovechando las bibliotecas mencionadas anteriormente.