Detta bibliotek ger dig rena, utbyggbara komponenter som du kan använda i din app och utveckla vidare.

Radix UI är ett lågnivå, ostilat, tillgängligt komponentbibliotek för att bygga högkvalitativa, användarvänliga webbgränssnitt. Du kan använda den tillsammans med React för att skapa appar med fullfjädrade komponenter som du enkelt kan styla för att passa din design.

Vad är Radix UI?

Radix UI är en samling primitiva, ostilade, tillgängliga UI-komponenter för React-applikationer. Det ger de byggstenar du behöver för att skapa ditt designsystem.

Huvudmålet med Radix UI är att tillhandahålla en uppsättning lågnivåverktygskomponenter som hjälper dig att bygga återanvändbara komponenter. Komponenterna kommer som standard utan styling, vilket innebär att du har fullständig kontroll över deras stil.

Konfigurera din React-applikation

Du måste konfigurera en React-applikation för att använda Radix UI. För att göra det måste du ha Node.js och npm, Node-pakethanteraren, installerat på din dator.

Med dessa installerade kan du skapa en ny React-applikation med detta terminalkommando:

instagram viewer 
npm init vite

Detta kommando kommer att initiera Vite. Vite är ett snabbbyggt verktyg som låter dig skapa moderna webbapplikationer snabbt. Du kan använd Vite för att skapa din React-applikation.

Efter att ha kört kommandot ovan kommer du att svara på en rad uppmaningar för att konfigurera din React-applikation. Skapa en React-applikation, namnge den radix-ui-app, och se till att den använder TypeScript-språket.

Ange sedan din nya app rotkatalog och installera nödvändiga beroenden:

cd radix-ui-app
npm install

Din React-applikation är nu klar.

Installerar Radix UI

Radix UI är ett fantastiskt komponentbiblioteky som du kan använda för att skapa tillgängliga React-applikationer. Det låter dig installera varje komponent individuellt som ett separat paket. Du kommer att ange komponentens namn i ditt kommando för att installera den.

Till exempel:

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

Detta kommer att installera rullgardinsmenyn Radix UI. Radix UI har många andra komponenter som du kan installera beroende på dina behov.

Bygg din applikation med Radix UI

Nu när du har installerat rullgardinsmenykomponenten från Radix UI kan du bygga en enkel rullgardinsmeny med Radix UI. För att göra detta kommer du först att importera de nödvändiga komponenterna från rullgardinsmenyn Radix UI.

Här är ett exempel som visar hur du kan bygga en enkel rullgardinsmeny med 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;

Denna kod importerar alla komponenter från @radix-ui/react-dropdown-meny paketera som Rullgardinsmenyn. Den använder sedan dessa komponenter för att skapa en rullgardinsmeny inuti div element.

De Rullgardinsmenyn. Rot är rotkomponenten i rullgardinsmenyn. Du bör kapsla alla andra rullgardinsmenykomponenter i denna. Du kan definiera en utlösare för rullgardinsmenyn med hjälp av Rullgardinsmenyn. Utlösare komponent. I det här fallet är utlösaren en knapp element med texten "Klicka på mig". När du klickar på knappen kommer rullgardinsmenyn upp.

Med Rullgardinsmenyn. Innehåll komponent definierar du innehållet i rullgardinsmenyn och Rullgardinsmenyn. Grupp komponent representerar en grupp relaterade menyalternativ. Du använder Rullgardinsmenyn. Artikel komponent för att definiera enskilda objekt i rullgardinsmenyn.

I det här exemplet finns det två DropdownMenu. Gruppkomponenter, som var och en innehåller en enda DropdownMenu. Artikelkomponent. Dessa komponenter är alla inslagna i en DropdownMenu. Innehållskomponent.

Genom att rendera kodblocket ovan kommer ditt gränssnitt att se ut så här:

Som du kan se saknar resultaten någon formgivning, så du måste lägga till din egen CSS härnäst.

Styla dina Radix UI-komponenter

En av fördelarna med Radix UI är att det inte påtvingar dina komponenter någon styling. Det betyder att du har fullständig kontroll över din komponents utformning. Du kan styla dina komponenter med hjälp av CSS-in-JS-bibliotek som stilade komponenter och känslor, eller så kan du använda traditionell CSS.

Här är ett exempel på hur du stylar dina Radix UI-komponenter med traditionell CSS:

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





"trigger">


exportdefault App;

Detta exempel lägger till klassnamn stötta till knapp element, den Rullgardinsmenyn. Utlösare, den Rullgardinsmenyn. Innehåll, och den Rullgardinsmenyn. Artikel komponenter.

Efter att ha tillämpat klasserna kan du sedan styla komponenterna med 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;
}

Kodblocket ovan kommer att tillämpa de definierade stilarna på komponenterna för ett mer attraktivt utseende:

Radix UI erbjuder också React Icons, så att du kan lägga till ikoner i din applikation för att försköna den ytterligare. Börja med att installera Radix UI icons-paketet:

npm install @radix-ui/react-icons

Efter att du har installerat paketet kan du använda några av dess ikoner i din applikation.

Till exempel:

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;

Detta exempel lägger till HamburgerMenuIcon och PlusIcon till ansökan. Den förra är inuti en knappkomponent, och den senare förstärker den första Falla ner. Artikel komponent.

Uppdatera sedan .Artikel klass i din CSS-fil:

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

Nu ska din ansökan se ut så här.

Bygg Quality React Application med Radix UI

Radix UI är ett kraftfullt verktyg för att bygga React-applikationer. Den tillhandahåller en uppsättning lågnivå, oformaterade, tillgängliga komponenter som du kan använda som byggstenar för din applikation.

Genom att använda Radix UI kan du fokusera på funktionaliteten i din applikation utan att oroa dig för underliggande UI-komplexitet. Oavsett om du är en erfaren utvecklare eller nybörjare kan Radix UI hjälpa dig att bygga högkvalitativa, användarvänliga webbgränssnitt.