Toolverse
All skills

heroui-react

by heroui-inc

HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when working with HeroUI components, installing HeroUI, customizing HeroUI themes, or accessing HeroUI component documentation. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
1

About this skill

HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when working with HeroUI components, installing HeroUI, customizing HeroUI themes, or accessing HeroUI component documentation. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

How to use

  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.

Related skills