Essa biblioteca fornece componentes limpos e extensíveis que você pode usar em seu aplicativo e desenvolver ainda mais.

O Radix UI é uma biblioteca de componentes acessível, sem estilo e de baixo nível para a construção de interfaces da web de alta qualidade e fáceis de usar. Você pode usá-lo junto com o React para criar aplicativos com componentes completos que você pode estilizar facilmente para se adequar ao seu design.

O que é interface do usuário do Radix?

Radix UI é uma coleção de componentes de interface do usuário primitivos, sem estilo e acessíveis para aplicativos React. Ele fornece os blocos de construção necessários para criar seu sistema de design.

O principal objetivo do Radix UI é fornecer um conjunto de componentes utilitários de baixo nível que ajudam a criar componentes reutilizáveis. Os componentes vêm sem estilo por padrão, o que significa que você tem controle total sobre o estilo deles.

Configurando seu aplicativo React

Você deve configurar um aplicativo React para usar o Radix UI. Para fazer isso, você precisa ter Node.js e

instagram viewer
npm, o gerenciador de pacotes Node, instalado em seu computador.

Com eles instalados, você pode criar um novo aplicativo React com este comando de terminal:

npm init vite

Este comando irá inicializar o Vite. O Vite é uma ferramenta de construção rápida que permite criar aplicativos da Web modernos rapidamente. Você pode use o Vite para criar seu aplicativo React.

Depois de executar o comando acima, você responderá a uma série de prompts para configurar seu aplicativo React. Crie um aplicativo React, nomeie-o radix-ui-appe verifique se ele usa a linguagem TypeScript.

Em seguida, insira o diretório raiz do seu novo aplicativo e instale as dependências necessárias:

cd radix-ui-app
npm install

Seu aplicativo React agora está pronto.

Instalando a IU do Radix

Radix IU é uma grande biblioteca de componentesy que você pode usar para criar aplicativos React acessíveis. Ele permite que você instale cada componente individualmente como um pacote separado. Você especificará o nome do componente em seu comando para instalá-lo.

Por exemplo:

npm install @radix-ui/react-dropdown-menu

Isso instalará o componente do menu suspenso da IU do Radix. O Radix UI tem muitos outros componentes que você pode instalar dependendo de suas necessidades.

Construindo seu aplicativo usando Radix UI

Agora que você instalou o componente de menu suspenso do Radix UI, pode criar um menu suspenso simples usando o Radix UI. Para fazer isso, você primeiro importará os componentes necessários do componente do menu suspenso Radix UI.

Aqui está um exemplo mostrando como você pode criar um menu suspenso simples usando o Radix:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (













New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>




More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}
exportdefault App;

Este código importa todos os componentes do @radix-ui/react-dropdown-menu pacote como Menu suspenso. Em seguida, ele usa esses componentes para criar um menu suspenso dentro do div elemento.

O Menu suspenso. Raiz é o componente raiz do menu suspenso. Você deve aninhar todos os outros componentes do menu suspenso dentro deste. Você pode definir um gatilho para o menu suspenso usando o Menu suspenso. Acionar componente. Neste caso, o gatilho é um botão elemento com o texto "Clique em mim". Ao clicar no botão, o menu suspenso aparecerá.

Com o Menu suspenso. Contente componente, você define o conteúdo do menu suspenso e o Menu suspenso. Grupo O componente representa um grupo de itens de menu relacionados. Você está usando o Menu suspenso. Item componente para definir itens individuais do menu suspenso.

Neste exemplo, existem dois DropdownMenu. Componentes de grupo, cada um contendo um único DropdownMenu. Componente do artigo. Esses componentes são todos agrupados em um DropdownMenu. Componente de conteúdo.

A renderização do bloco de código acima modificará sua interface para que fique assim:

Como você pode ver, os resultados carecem de estilo, então você precisará adicionar seu próprio CSS em seguida.

Estilizando seus componentes de IU do Radix

Uma das vantagens do Radix UI é que ele não impõe nenhum estilo aos seus componentes. Isso significa que você tem controle total sobre o estilo do seu componente. Você pode estilizar seus componentes usando bibliotecas CSS-in-JS, como componentes estilizados e emoção, ou pode usar CSS tradicional.

Aqui está um exemplo de como estilizar seus componentes Radix UI usando CSS tradicional:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (





"trigger">


exportdefault App;

Este exemplo adiciona o nome da classe suporte para o botão elemento, o Menu suspenso. Acionar, o Menu suspenso. Contente, e a Menu suspenso. Item componentes.

Depois de aplicar as classes, você pode estilizar os componentes usando CSS:

.button {
padding: 0.7rem 0.8rem;
border: none;
border-radius: 12px;
background-color: #333333;
color: #f2f2f2;
}
.trigger {
border: none;
}


.content {
margin: 1rem;
padding: 0.7rem;
background-color: #FFFFFF;
color: #333333;
border-radius: 7px;
}


.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
}
.item:hover {
background-color: #333333;
color: lightgray;
}

O bloco de código acima aplicará os estilos definidos aos componentes para uma aparência mais atraente:

O Radix UI também oferece React Icons, para que você possa adicionar ícones ao seu aplicativo para embelezá-lo ainda mais. Comece instalando o pacote de ícones Radix UI:

npm install @radix-ui/react-icons

Depois de instalar o pacote, você pode usar alguns de seus ícones em seu aplicativo.

Por exemplo:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon, PlusIcon } from"@radix-ui/react-icons";
functionApp() {
return (





"trigger">


exportdefault App;

Este exemplo adiciona o HambúrguerMenuÍcone e PlusIcon ao aplicativo. O primeiro está dentro de um componente de botão e o último aumenta o primeiro Suspenso. Item componente.

A seguir, atualize o .item classe em seu arquivo CSS:

.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
display: flex;
gap: 1rem;
}

Agora sua aplicação deve ficar assim.

Crie um aplicativo React de qualidade usando a interface do usuário do Radix

O Radix UI é uma ferramenta poderosa para criar aplicativos React. Ele fornece um conjunto de componentes acessíveis, sem estilo e de baixo nível que você pode usar como blocos de construção para seu aplicativo.

Ao usar o Radix UI, você pode se concentrar na funcionalidade do seu aplicativo sem se preocupar com as complexidades subjacentes da interface do usuário. Quer você seja um desenvolvedor experiente ou iniciante, o Radix UI pode ajudá-lo a criar interfaces da Web fáceis de usar e de alta qualidade.