4 melhores bibliotecas de componentes sem estilo para construir aplicativos React personalizáveis

Você pode usar bibliotecas de componentes que fornecem elementos estilizados pré-construídos para simplificar o processo de desenvolvimento de aplicativos React. Essas bibliotecas podem economizar muito tempo e esforço, mas também podem limitar seu controle sobre o estilo do seu aplicativo. Se você precisar de mais controle sobre o estilo de seus aplicativos React, considere usar uma biblioteca de componentes sem estilo.

O que são bibliotecas de componentes sem estilo?

Componente sem estilo bibliotecas são usadas para desenvolver aplicativos React acessíveis. Eles são coleções de componentes de UI reutilizáveis ​​sem estilos predefinidos. Eles fornecem a estrutura básica dos elementos da IU sem qualquer estilo. Isso lhe dá controle total sobre a aparência e o comportamento dos seus componentes.

Benefícios das bibliotecas de componentes sem estilo

Aqui estão alguns dos benefícios de usar bibliotecas de componentes sem estilo:

• Controle total sobre o estilo: bibliotecas de componentes sem estilo oferecem controle total sobre a aparência dos seus componentes. Você pode usar qualquer CSS ou estrutura de estilo para personalizar os componentes de acordo com suas necessidades.
• Acelere o desenvolvimento: bibliotecas de componentes sem estilo podem ajudar a acelerar o desenvolvimento, fornecendo um conjunto de componentes pré-construídos que você pode usar em seu aplicativo.
• De fácil manutenção: bibliotecas de componentes sem estilo são fáceis de manter porque não estão fortemente acopladas a nenhuma estrutura de estilo específica. Isso significa que você pode atualizar facilmente o estilo sem fazer alterações no código subjacente.

Radix UI é uma biblioteca de componentes sem estilo que se concentra na acessibilidade. Ele fornece um conjunto de componentes de UI projetados para serem acessíveis a todos os usuários. Você pode crie belos aplicativos React usando Radix UI.

Ao trabalhar com Radix UI, você pode instalar os componentes individuais necessários em vez da biblioteca inteira. Isso garante que você mantenha seu aplicativo leve.

Por exemplo, se você precisar apenas de um componente acordeão, poderá instalá-lo em seu aplicativo executando o seguinte comando:

npm install @radix-ui/react-accordion

Depois de instalar o componente acordeão, você pode criar acordeões em seu aplicativo React.

Aqui está um exemplo de como usar o componente acordeão:

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>
 )
}

O bloco de código acima configura um componente acordeão básico sem estilo usando o @radix-ui/react-acordeão biblioteca, permitindo itens recolhíveis com conteúdo personalizável.

O código irá gerar um acordeão parecido com este:

A biblioteca React Aria é um conjunto de ganchos para construir interfaces de usuário no React. A biblioteca facilita a criação de aplicativos Web acessíveis, fornecendo uma coleção de componentes que seguem as práticas recomendadas de acessibilidade.

A Adobe desenvolveu e mantém a biblioteca React Aria. A biblioteca faz parte do Adobe Spectrum Design System mais extenso, que fornece um conjunto abrangente de diretrizes de design e recursos para a construção de interfaces de usuário acessíveis. Os elementos fornecidos pela biblioteca React Aria não têm estilo, permitindo que você personalize os elementos para atender às suas necessidades.

Para usar React Aria em seu aplicativo React, instale-o executando o seguinte comando:

npm install react-aria

Aqui está um exemplo de como criar um componente de botão usando o useButton 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;

Agora você pode importar e renderizar o botão componente em qualquer outro componente que você escolher.

Por exemplo:

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

Ao renderizar o bloco de código acima, ele gerará um botão simples parecido com este:

Se você não se sentir confortável em usar o React Aria por causa dos ganchos, use o Componentes do React Aria biblioteca em vez disso. Esta biblioteca fornece componentes pré-construídos que são acessíveis por padrão. É uma camada fina sobre a biblioteca React Aria. Os componentes fornecidos não têm estilo, portanto as duas bibliotecas são muito semelhantes.

Base UI é uma biblioteca React UI sem estilo que fornece componentes de UI sem estilo. A equipe do Material UI criou a UI Base com um conjunto de componentes básicos que você pode usar para construir seus próprios aplicativos React personalizados. Eles basearam a biblioteca Base UI no mesmo engenharia robusta como Material UI, mas a UI Base não implementa o Material Design.

Você pode instalar o Base UI em seu aplicativo React com este comando:

npm install @mui/base

A UI base fornece componentes em trânsito, o que significa que você pode importar e usar componentes diretamente da biblioteca. Ele também fornece ganchos que você pode usar para criar e configurar seus componentes.

Aqui está um exemplo de uso de componentes de UI base:

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


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

Este código gera um botão simples usando o Botão componente da biblioteca Base UI. Você também pode usar o useButton gancho para executar a mesma tarefa.

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


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

O useButton gancho e o Botão componente irá gerar um botão sem estilo, conforme mostrado na imagem abaixo.

Outra biblioteca que você pode explorar é a Headless UI, que oferece elementos de UI sem estilo, dando a você a liberdade de personalizar a aparência e o comportamento de seus componentes de UI conforme achar necessário.

Você pode instalar a biblioteca usando o seguinte comando:

npm install @headlessui/react

Depois de instalar a biblioteca, você pode usar os diversos componentes que a biblioteca fornece em seu aplicativo React.

Por exemplo:

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




Popover</Popover.Button>

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

Neste exemplo, você cria um popover usando o Dar um pulo componente da biblioteca Headless UI. O bloco de código acima irá gerar um popover parecido com este.

Obtenha controle total com componentes sem estilo

Bibliotecas de componentes sem estilo oferecem controle total sobre o estilo de seu aplicativo React, permitindo criar experiências de usuário exclusivas. Essas bibliotecas oferecem uma variedade de opções para atender às suas necessidades. Você pode criar aplicativos React visualmente atraentes e altamente personalizáveis ​​aproveitando as bibliotecas mencionadas acima.