Esta biblioteca le brinda componentes limpios y extensibles que puede usar en su aplicación y desarrollar aún más.

Radix UI es una biblioteca de componentes accesibles, sin estilo y de bajo nivel para crear interfaces web fáciles de usar y de alta calidad. Puede usarlo junto con React para crear aplicaciones con componentes completos que puede diseñar fácilmente para que se ajusten a su diseño.

¿Qué es la interfaz de usuario de Radix?

Radix UI es una colección de componentes de interfaz de usuario primitivos, sin estilo y accesibles para aplicaciones React. Proporciona los componentes básicos que necesita para crear su sistema de diseño.

El objetivo principal de Radix UI es proporcionar un conjunto de componentes de utilidad de bajo nivel que lo ayuden a crear componentes reutilizables. Los componentes vienen sin estilo de forma predeterminada, lo que significa que tiene control total sobre su estilo.

Configuración de su aplicación React

Debe configurar una aplicación React para usar Radix UI. Para hacerlo, necesita tener Node.js y

instagram viewer
npm, el administrador de paquetes de Node, instalado en su computadora.

Con estos instalados, puede crear una nueva aplicación React con este comando de terminal:

npm init vite

Este comando inicializará Vite. Vite es una herramienta de compilación rápida que le permite crear aplicaciones web modernas rápidamente. Puede use Vite para crear su aplicación React.

Después de ejecutar el comando anterior, responderá una serie de indicaciones para configurar su aplicación React. Cree una aplicación React, asígnele un nombre radix-ui-aplicacióny asegúrese de que utiliza el lenguaje TypeScript.

A continuación, ingrese al directorio raíz de su nueva aplicación e instale las dependencias necesarias:

cd radix-ui-app
npm install

Su aplicación React ya está lista.

Instalación de la interfaz de usuario de Radix

La interfaz de usuario de Radix es una gran biblioteca de componentesy que puede usar para crear aplicaciones React accesibles. Le permite instalar cada componente individualmente como un paquete separado. Especificará el nombre del componente en su comando para instalarlo.

Por ejemplo:

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

Esto instalará el componente del menú desplegable Radix UI. Radix UI tiene muchos otros componentes que puede instalar según sus necesidades.

Construyendo su aplicación usando Radix UI

Ahora que ha instalado el componente de menú desplegable de Radix UI, puede crear un menú desplegable simple usando Radix UI. Para hacer esto, primero importará los componentes necesarios desde el componente del menú desplegable de la interfaz de usuario de Radix.

Aquí hay un ejemplo que muestra cómo puede crear un menú desplegable simple usando 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 los componentes del @radix-ui/reaccionar-menu-desplegable paquete como Menú desplegable. Luego usa estos componentes para crear un menú desplegable dentro del división elemento.

El Menú desplegable. Raíz es el componente raíz del menú desplegable. Debe anidar todos los demás componentes del menú desplegable dentro de este. Puede definir un disparador para el menú desplegable usando el Menú desplegable. Desencadenar componente. En este caso, el disparador es un botón elemento con el texto "Click Me". Al hacer clic en el botón, aparecerá el menú desplegable.

Con el Menú desplegable. Contenido componente, usted define el contenido del menú desplegable y el Menú desplegable. Grupo componente representa un grupo de elementos de menú relacionados. estas usando el Menú desplegable. Artículo componente para definir elementos individuales del menú desplegable.

En este ejemplo, hay dos menús desplegables. Componentes del grupo, cada uno de los cuales contiene un solo DropdownMenu. componente del artículo. Todos estos componentes están envueltos en un DropdownMenu. componente de contenido.

Representar el bloque de código anterior modificará su interfaz para que se vea así:

Como puede ver, los resultados carecen de estilo, por lo que deberá agregar su propio CSS a continuación.

Dar estilo a los componentes de la interfaz de usuario de Radix

Una de las ventajas de Radix UI es que no impone ningún estilo a sus componentes. Esto significa que tiene control total sobre el estilo de su componente. Puede diseñar sus componentes usando bibliotecas CSS-in-JS como componentes con estilo y emoción, o puede usar CSS tradicional.

Este es un ejemplo de cómo diseñar los componentes de la interfaz de usuario de Radix usando CSS tradicional:

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





"trigger">


exportdefault App;

Este ejemplo agrega el nombre de la clase apoyo a la botón elemento, el Menú desplegable. Desencadenar, el Menú desplegable. Contenido, y el Menú desplegable. Artículo componentes

Después de aplicar las clases, puede diseñar los 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;
}

El bloque de código anterior aplicará los estilos definidos a los componentes para una apariencia más atractiva:

Radix UI también ofrece íconos React, por lo que puede agregar íconos a su aplicación para embellecerla un poco más. Comience instalando el paquete de iconos de la interfaz de usuario de Radix:

npm install @radix-ui/react-icons

Después de instalar el paquete, puede usar algunos de sus íconos en su aplicación.

Por ejemplo:

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 ejemplo agrega el HamburguesaMenúIcono y MásIcono a la aplicación El primero está dentro de un componente de botón, y el segundo aumenta el primero Desplegable. Artículo componente.

A continuación, actualice la .artículo clase en su archivo CSS:

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

Ahora su aplicación debería verse así.

Cree una aplicación Quality React usando Radix UI

Radix UI es una poderosa herramienta para crear aplicaciones React. Proporciona un conjunto de componentes accesibles, sin estilo y de bajo nivel que puede utilizar como componentes básicos para su aplicación.

Al usar Radix UI, puede concentrarse en la funcionalidad de su aplicación sin preocuparse por las complejidades subyacentes de la UI. Ya sea que sea un desarrollador experimentado o un principiante, Radix UI puede ayudarlo a crear interfaces web fáciles de usar y de alta calidad.