Toolverse
Wszystkie skille

heroui-react

autor: heroui-inc

Biblioteka komponentów React z Tailwind CSS v4 i React Aria — dostępne, personalizowalne UI do szybkiego budowania interfejsów.

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Frontend
Wyświetlenia
1

O skillu

HeroUI v3 to nowoczesna biblioteka komponentów React zbudowana na Tailwind CSS v4 i React Aria Components. Zawiera gotowe, dostępne komponenty takie jak przyciski, modale, formularze i karty, które możesz natychmiast wdrożyć w swoim projekcie. Biblioteka obsługuje ciemny i jasny motyw z zmiennymi oklch, nie wymaga providera ani dodatkowych zależności animacyjnych — wszystko działa na czystym CSS. Użyj tego narzędzia gdy budujesz interfejsy z HeroUI, instalujesz @heroui/react, konfigurujesz motywy lub szukasz dokumentacji komponentów.

Jak używać

  1. Zainstaluj HeroUI v3 za pomocą komendy curl -fsSL https://heroui.com/install | bash -s heroui-react — skrypt automatycznie doda niezbędne pakiety @heroui/react i @heroui/styles do Twojego projektu.

  2. Pamiętaj, że HeroUI v3 nie wymaga wrappera HeroUIProvider — w przeciwieństwie do wersji 2, komponenty działają bez providera, co upraszcza strukturę aplikacji.

  3. Importuj komponenty bezpośrednio z @heroui/react, na przykład Card, Button, Modal czy Form — każdy komponent obsługuje składnię złożoną, gdzie możesz zagnieżdżać elementy takie jak Card.Header czy Card.Body.

  4. Stylizuj komponenty za pomocą Tailwind CSS v4 i zmiennych oklch dostępnych w @heroui/styles — system automatycznie obsługuje przełączanie między motywem jasnym i ciemnym bez konieczności dodatkowych bibliotek animacyjnych.

  5. Jeśli pracujesz nad projektem, który wcześniej używał HeroUI v2, nie stosuj starych wzorców — zmienił się API komponentów, system stylów i sposób konfiguracji, dlatego zawsze odwołuj się do dokumentacji v3.

  6. Sprawdź dokumentację komponentów na heroui.com, aby poznać dostępne właściwości, warianty i przykłady użycia dla każdego komponentu w Twojej aplikacji.

Podobne skille