Componente React UI: 15 biblioteci populare

React există de mai bine de un deceniu. La care este o nebunie să te gândești. Dar, în ciuda vechimii sale, biblioteca React atrage peste 14 milioane de descărcări săptămânale. Există, de asemenea, peste 80.000 de alte proiecte open-source care depind de React pentru a funcționa.

Multe dintre aceste proiecte extind React pe scară largă. Mai exact, dezvoltatorii creează elemente și componente personalizate care pot fi reutilizate în timpul dezvoltării aplicației. De fapt, lucrul cu React se referă aproape exclusiv la componente. Dacă doriți să creați un MVP sau să creați rapid un aspect al aplicației - componentele fac procesul rapid și accesibil.

Dacă doriți să vă reîmprospătați înțelegerea despre React - verificați acest articol de Linton Ye.

Ar trebui să utilizați o bibliotecă de componente React UI?

React este prin natură o bibliotecă pentru construirea de interfețe cu utilizatorul. Componentele în acest context sunt elemente de interfață de utilizare prefabricate pe care le puteți reutiliza în procesul de dezvoltare. Componentele React (sau orice alt cadru) urmăresc să accelereze ritmul în care creați aplicații.

Dar, există și câteva beneficii substanțiale în utilizarea unei biblioteci de componente:

• Ritmul de dezvoltare. Deoarece componentele sunt pre-construite, puteți crea rapid un prototip funcțional al modului în care plănuiți să arate aplicația dvs. în cele din urmă.
• Productivitate. Fiecare bibliotecă de componente acoperă elemente de design precum formulare, butoane și secțiuni. Ca atare, puteți săriți să proiectați singuri acele elemente.
• Familiaritatea cu designul. Creativitatea are locul ei, dar oferirea unei experiențe de design familiare utilizatorilor dvs. este esențială dacă doriți să oferiți o experiență fără fricțiuni.
• Cele mai recente standarde. În special, majoritatea bibliotecilor moderne sunt dezvoltate pentru a avea componentele conforme cu cele mai recente standarde de accesibilitate.

În ceea ce privește potențialul dezavantaj, ei bine, în cele mai multe cazuri, te vei baza pe sprijinul dezvoltatorului/comunității. Și, este, de asemenea, o curbă de învățare să stăpânești o nouă bibliotecă, dar cu siguranță cartofi mici de o problemă în imaginea de ansamblu.

Ce este un sistem de proiectare?

Componentele React se încadrează într-o varietate de categorii. Puteți alege dintre componente „individuale” sau o bibliotecă completă de componente UI. Și, în multe cazuri, aceste biblioteci cu drepturi depline includ un sistem complet de proiectare.

În termeni simpli, un sistem de proiectare este un set complet de componente care pot fi folosite pentru a construi aplicații la scară. Probabil ați auzit de Google Material UI, sistemul de design Polaris de la Shopify și multe altele.

În orice caz, un sistem de proiectare ajută la crearea unei experiențe de utilizator consistente prin reutilizarea acelorași componente UI. Din fericire, fiecare bibliotecă aduce un concept de design unic.

Criterii simple

Când am pregătit această rezumat – am urmat criterii simple pentru a mă asigura că această listă rămâne relevantă și este actualizată:

• Complet. Ca și în, fiecare bibliotecă este complet extinsă și acoperă o gamă largă de elemente UI.
• Accesibilitate. Acest lucru este specific experienței de dezvoltare. Preocuparea mea principală este că biblioteca de componente dată ar trebui să fie ușor de lucrat din perspectiva unui dezvoltator.
• Activ. Ca și în, biblioteca are atât un număr activ de urmăritori, cât și este actualizată frecvent.

De asemenea, am luat în considerare lucruri precum popularitatea GitHub și tracțiunea generală printre tutorialele de dezvoltare web etc. Dacă apare o nouă bibliotecă de componente React și arată promițătoare, voi face tot posibilul să o includ în cele din urmă în această listă.

Să aruncăm o privire mai atentă.

Mantine

Mantine este o bibliotecă extinsă de componente UI care acoperă diverse elemente și include cârlige pentru fiecare. Creată de Vitaly Rtishchev, biblioteca a atras o mulțime de urmăritori de la prima sa lansare în 2021. Mantine include o temă întunecată nativă, iar toate componentele sunt disponibile atât în ​​stilul Light, cât și în stil Dark.

În total, există peste 120 de componente personalizate.

Documentația acoperă o gamă largă de cazuri de utilizare, inclusiv modul de utilizare a Mantine cu Next.js și Gatsby. Proiectul este foarte activ în dezvoltare. Și, așa cum au spus unii dezvoltatori, „documentația este de neegalat”. .

Chakra

Chakra este una dintre bibliotecile React UI cu cea mai rapidă creștere. Premisa componentelor simple și accesibile înseamnă că puteți începe să vă porniți aplicațiile instantaneu. În plus, Chakra urmează un etos strict al principiilor de design. Fiecare componentă vine cu un suport de stil unic, ceea ce înseamnă că puteți personaliza stilurile componente individual.

Dacă comparăm Chakra cu biblioteci de componente mai rigide, este evident că Chakra funcționează într-un mediu fără păreri. Ca atare, scalarea aplicațiilor și a interfețelor devine mai ușoară, deoarece nu va trebui să depindeți de specificațiile stricte ale proprietăților.

Alte caracteristici notabile includ suport TypeScript, accesibilitate prin WAI-ARIA și a11y și Styled System pentru stilul prop.

UI material

Material Design mai are nevoie de o prezentare? Biblioteca MUI implementează întregul sistem de design Google într-o bibliotecă React extinsă. MUI este, de asemenea, una dintre cele mai iubite biblioteci din această ramură. Cu aproape 75.000 de stele pe GitHub, popularitatea MUI este destul de clară. Deci, ce face ca acesta să fie un astfel de succes?

În primul rând, MUI este rulat ca o marcă și nu doar ca un proiect open-source. Aceasta înseamnă că pentru a-și proteja integritatea mărcii – componentele sunt stilate la perfecțiune. Același lucru este valabil și pentru documentație, care nu este tipul tău mediu „iată un exemplu” .

Cea mai bună parte, totuși, este câți oameni depind de MUI. Deoarece proiectul este atât de popular, există nenumărate resurse gratuite pentru a vă ajuta să începeți. Șabloane de pagini de destinație, o machetă a designului blogului și stiluri de portofoliu. Gândiți-vă la un proiect și sunt șanse ca cineva să fi publicat deja un boilerplate pentru ceva similar.

Gestalt

Gestalt este „ Un set de componente React UI care acceptă limbajul de design al Pinterest” . Cu alte cuvinte, este sistemul de design folosit de echipele de dezvoltatori și designeri Pinterest.

Privind mai atent, Gestalt se deosebește de alte sisteme de design prin oferirea unei fundații robuste bazate pe standarde web moderne. Aceste standarde includ accesibilitatea, opțiunile de culoare persistente și optimizarea variabilă în profunzime.

Și pentru că Pinterest folosește React în producție, fiecare componentă din această bibliotecă are o componentă React prefabricată disponibilă.

PrimeReact

Este posibil ca PrimeReact să nu aibă bugetul de marketing al giganților, dar este totuși o bibliotecă excepțională. Datorită naturii sale agnostice, PrimeReact este independent de stil.

Ca atare, îl puteți folosi cu ghiduri de stil populare, cum ar fi Tailwind, Material, Bootstrap, Arya și altele. Puteți alege tema de bază folosind caracteristica Designer.

Componentele în sine acoperă tot ceea ce v-ați aștepta de la o bibliotecă extinsă. Meniuri, varietate de panouri, tabele de date și multe altele. PrimeReact face parte din proiectul PrimeFaces. Acest lucru vă permite să accesați rapid celelalte resurse ale acestora, cum ar fi Teme și Blocuri.

Bootstrap

Puteți chiar să vă numiți dezvoltator front-end dacă nu ați încercat niciodată Bootstrap? Setul de instrumente front-end favorit din toate timpurile ( subiectiv ) are și o bibliotecă React. Și, a fost construit de la zero pentru a fi primul React. Fiecare componentă a fost proiectată personalizat pentru a include caracteristici Bootstrap, dar este independentă de jQuery.

O caracteristică notabilă a acestei biblioteci este că folosește exclusiv ghidul de stil Bootstrap.

Ca atare, este posibil să utilizați React Bootstrap cu modele care se bazează pe foaia de stil originală. De exemplu, puteți lua o temă WordPress bazată pe Bootstrap și o puteți restructura rapid ca un design bazat pe React.

vesnic verde

Evergreen este prima bibliotecă din această listă care este și un sistem de proiectare. Și, este oferit cu generozitate de Segment. Deci, dacă te uiți la site-ul web al Segmentului și la produsul său, știi că este construit pe spatele lui Evergreen. Acestea fiind spuse, această bibliotecă nu vă va bloca într-o anumită configurație și nu va necesita integrare neortodoxă.

Cu propriile cuvinte, „În loc să creeze configurații fixe care funcționează astăzi, Evergreen promovează sisteme de construcție care anticipează cerințe de design noi și în schimbare.”

Toate componentele sunt disponibile și ca fișier Figma.

Biblioteca este livrată cu 2 teme personalizate: clasică și implicită . Și aveți opțiunea de a defini stiluri personalizate pentru fiecare temă sau pur și simplu de a crea unul nou de la zero.

Arco Design

Comunitatea de dezvoltatori chinezi a făcut câteva contribuții impecabile la open-source. Și, Arco nu face excepție. Această bibliotecă de componente de nivel enterprise va transforma procesul de construire a interfețelor moderne. Este, de asemenea, un sistem de design, care asigură că întreaga fundație de design urmează o rutină strictă.

Arco se remarcă prin filozofia sa de design rafinată. Sistemul lor de design pune accent pe accesibilitate, dar și pe experiența utilizatorului. Un exemplu în acest sens este abordarea lor în proiectarea formelor.

Formele încearcă în mare măsură să finalizeze o acțiune în mod sincron. În loc să ofere un modal extern, Arco este specializat în feedback în timp real bazat pe inputul utilizatorului. Componentele lor pot fi, de asemenea, descărcate pentru a fi utilizate în Figma și, respectiv, Sketch.

Geist

Geist UI a fost creat prin bifurcarea sistemului de design oferit de Vercel. Prima mea impresie despre Geist este că este destul de minimalist. Ceea ce îl face perfect pentru construirea de pagini de destinație și site-uri web de portofoliu.

Deși, evident, a fost folosit atât în ​​aplicații web, cât și în implementări de proiecte mai complicate. În actualizările recente, Geist a implementat capacitatea de a adăuga teme .

Deci, dacă vă place structura și varietatea componentelor - implementarea unui stil personalizat este simplă. De asemenea, puteți apela stiluri personalizate pentru componente individuale.

UI fluent

React este o tehnologie atât de revoluționară încât întreaga suită Microsoft 365 se bazează pe aceasta.

Ei bine, prin Fluent UI, desigur.

Fluent este interpretarea Microsoft despre cum ar trebui să fie o bibliotecă de componente React.

Și, sincer, chiar dacă furnizează componente UI, face mult mai mult.

Pachetul Fluent UI Utilities include multe clase, funcții și interfețe. Acestea vă vor ajuta să creați experiențe de utilizator bogate și interactive. Mai mult decât să construiți aplicații, Fluent vă ajută să construiți adevărate experiențe de întreprindere.

Este, de asemenea, gestionat de Microsoft. Deci, lucruri precum problemele de fiabilitate sunt excluse.

Radix

Una dintre principalele atracții ale oricărui tip de bibliotecă de componente este stilul. Este îngrijit, geek sau are un aspect profesional? Replică o aplicație web populară? Toate acestea sunt întrebări valide.

Cu toate acestea, Radix UI este specializată într-o abordare diferită.

Radix, care este o bibliotecă de componente de nivel scăzut, subliniază accesibilitatea și potențialul de stil personalizat. O face prin introducerea componentelor ca o bază barebone.

Deoarece componentele sunt livrate în stare brută , puteți săpa adânc în libertatea creativă de a le modela singur. În schimb, Radix oferă implementare nativă de accesibilitate. În plus, componentele sunt proiectate pentru a fi granulare, permițând integrarea unui ghid de stil personalizat.

Reakit

Reakit este un set de instrumente extins pentru menținerea aplicațiilor web bogate. Este accesibil prin proiectare și implementează o structură în stil pachet. Aceasta înseamnă că puteți utiliza componente individuale și puteți dezactiva altele. Ca rezultat, dimensiunea pachetului poate fi redusă enorm.

Important de reținut că Reakit nu vine cu un stil implicit. Acest lucru îl face și o bibliotecă de componente „la nivel scăzut”. Bun venit UI – folosind Reakit – este un exemplu despre cum puteți crea stiluri personalizate. Cu toate acestea, nu ar trebui să fie dificil de utilizat cu ceva de genul Tailwind.

Semi

Sistemul Semi Design alimentează întregul front-end TikTok. Este construită ca o bibliotecă cuprinzătoare de interfață cuprinzătoare pentru întreprindere. Cel mai remarcabil, în afară de componentele modulare, Semi își publică și kitul UI pe Figma. Acest lucru ajută la accelerarea procesului de proiectare a aplicațiilor și de integrare a dezvoltatorilor.

În ceea ce privește tematica, Semi are o platformă personalizată „do it yourself” construită în acest scop. Scopul este de a accelera ritmul în care definiți un sistem și apoi îl puneți în producție.

Design furnici

Influența modernului și accesibil din Orientul Îndepărtat este greu de trecut cu vederea. Ant Design este cea mai populară bibliotecă de componente de pe GitHub. Cel puțin pentru React. Nu numai că oferă componente UI, dar este și un limbaj de design. Vezi detalii aici.

Unul dintre lucrurile care o fac pe Ant atât de populară este resursele disponibile. Echipa de bază care întreține Ant a făcut o muncă excepțională în acest domeniu. Puteți alege dintre șabloane pre-construite, experiențe mobile personalizate sau puteți explora în profunzime documentația.

De asemenea, pentru a minimiza balonarea – Ant implementează o structură terță parte. În timp ce biblioteca lor acoperă multe elemente și aspecte ale UI, adăugarea de funcții suplimentare se face cel mai bine prin biblioteci externe. O mulțime de astfel de biblioteci urmează deja specificația de design Ant.

React Suite

React Suite este specializată în componente de design interactiv ușor de accesat. Este construit special pentru a fi utilizat pentru proiecte de tip back-end.

Cu toate acestea, îl puteți implementa în orice flux de lucru front-end.

Biblioteca oferă o selecție de teme distincte: lumină, întuneric și contrast ridicat. În ceea ce privește stilul personalizat - veți folosi Less.

Spectru

Adobe va fi introdus în sala faimei pentru contribuțiile sale la design. Și nu este surprinzător faptul că și-au pus sistemul de design Spectrum, disponibil pentru comunitatea open-source. Este chiar sistemul de design pe care Adobe îl folosește.

Spectrum folosește atât Flex, cât și Grid pentru implementarea layout-urilor. Și, o serie de componente ale acestora se bazează pe un aspect personalizat de Slots. Aceste „Sloturi” vă permit să stilați machete individuale și să atribuiți elemente specifice grupului lor imbricat.

Interesant este că Adobe descurajează dezvoltatorii și designerii să-și personalizeze stilul pre-construit. Ideea este că Spectrum este deja construit cu consistență în minte. Și, mai degrabă decât să te încurci cu stilul - scopul ar trebui să fie acela de a crea experiențe perfecte pentru utilizator.

În știrile recente, Adobe lucrează, de asemenea, la React Aria – o colecție de React Hooks care funcționează ca primitive de UI pentru accesibilitate. În cele din urmă, scopul pentru React Aria este să vă ofere libertatea de a vă construi propria bibliotecă de componente prin implementarea celor mai bune practici de accesibilitate de la început.

Web de bază

Una dintre principalele atracții ale bibliotecilor de componente este că au fost testate pe teren. Și în cazul Base Web – este sistemul de design folosit de Uber. Da, aplicația de partajare a călătoriei.

Base este specializată în personalizare în mai multe aplicații simultan. Scopul este de a oferi o soluție simplă de reutilizare a componentelor pe diferite căi de dezvoltare. Deci, de exemplu, atunci când începeți să lucrați la un nou design – mediul de tematică rămâne același.

Toată tematică cu Base se poate face în JavaScript, Flow și TypeScript.

Interfața de utilizare a circuitului

Este grozav să vezi companii din sectorul privat, cum ar fi SumUp, aduc contribuții atât de semnificative de tip open-source. Circuit UI este sistemul de proiectare utilizat pe infrastructura SumUp. Este construit pe baza unor principii selectate care asigură cea mai bună experiență posibilă de utilizator.

Aceste principii includ testarea codului înainte de angajare, accesibilitatea la scară completă, denumirea standardizată și multe altele. În afară de pachetul principal, aveți acces și la jetoanele lor de design (primitive) și la un pachet de icoane.

NextUI

NextUI folosește una dintre bibliotecile – ca bază – la care ne-am uitat mai devreme – Geist. Abordarea complexă a detaliilor de către NextUI le permite chiar și celor mai puțin experimentați designeri să creeze site-uri web și aplicații frumoase. Și, documentația extinsă face o treabă fantastică explicând cum să implementezi primul tău proiect NextUI.

Unele caracteristici notabile includ:

• Redare pe server cu suport complet pentru browsere.
• Funcții de accesibilitate integrate cu conformitate completă cu WAI-ARIA.
• Utilizează Stitches pentru a evita încărcarea CSS inutile. Încărcați doar ceea ce aveți nevoie.

Și, în sfârșit, devine o alegere extrem de populară printre utilizatorii Next.js.

UI minuscul

Tiny UI oferă componente React Hook care sunt scrise în TypeScript. Principala atracție a acestei biblioteci de componente este dimensiunea sa mică, dar caracterul personalizabil.

Mai exact, puteți predefini o temă personalizată înainte de a începe noul proiect.

Componentele variază de la elemente mici de aspect la lucruri mai specifice, cum ar fi formulare de feedback, modali și manageri de configurare.

Dezvoltare web bazată pe componente

Mulțumită tuturor acestor biblioteci minunate, acum s-ar putea să vă eliberați de a scrie din nou CSS! Lăsând toate glumele deoparte, există o mulțime de opțiuni grozave în această listă.

Dacă v-ați simțit vreodată influențat de a construi structuri complexe de proiectare, aceste biblioteci vor atenua o parte din această incertitudine. În afară de documentația extinsă, multe dintre bibliotecile menționate mai sus au un sprijin puternic din partea comunității.

Ca atare, puteți găsi întotdeauna extensii și implementări suplimentare.