HeroUI v3 React development guide - **name_fr:** Guide de développement HeroUI v3 React - **tl_en:** Build UIs with HeroUI v3 compound components on Tailwind CSS v4 and React Aria - **tl_fr:** Construire des interfaces avec les composants composés HeroUI v3 sur Tailwind CSS v4 et React Aria - **creator:** @heroui-inc - **type:** Agent skill - **url:** https://github.com/heroui-inc/heroui - **cat:** Frontend - **kws:** heroui, react, tailwind css, react aria, ui components, design system, oklch, theming - **license:** Apache-2.0 **Description EN:** Curated by Skill Harbor — ⚠️ **Security warning / Avertissement de sécurité** : the guide documents a one-liner install piped from curl into bash (`curl -fsSL https://heroui.com/install | bash — review it before running; the guide also documents an npm alternative`) — **prefer the npm install also documented in the same guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), which is the safe path. Apart from that, this is @heroui-inc's official development guide for HeroUI v3, the React component library on Tailwind CSS v4 and React Aria: v3-vs-v2 migration rules (no provider, compound components, CSS-based animations, semantic variants), framework setup (Next.js App Router, globals.css, PostCSS), component patterns, oklch CSS-variable theming, and helper scripts plus MDX docs to fetch per-component documentation before implementing. Honest caveats: **v3 only** — the guide explicitly warns that v2 patterns do not apply; Tailwind CSS v4 is mandatory; Apache-2.0 licensed; the skill expects the agent to fetch docs from heroui.com. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — ⚠️ **Avertissement de sécurité / Security warning** : le guide documente une installation en une ligne pipée de curl vers bash (`curl -fsSL https://heroui.com — examinez-la avant exécution ; le guide documente aussi une alternative npm/install | bash`) — **préférez l'installation npm également documentée dans le même guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), qui est la voie sûre. À part cela, c'est le guide de développement officiel de @heroui-inc pour HeroUI v3, la bibliothèque de composants React sur Tailwind CSS v4 et React Aria : règles de migration v3-vs-v2 (pas de provider, composants composés, animations en CSS, variantes sémantiques), configuration du framework (Next.js App Router, globals.css, PostCSS), modèles de composants, thématisation via variables CSS oklch, et scripts d'aide plus docs MDX pour récupérer la documentation de chaque composant avant d'implémenter. Bémols honnêtes : **v3 uniquement** — le guide prévient explicitement que les modèles v2 ne s'appliquent pas ; Tailwind CSS v4 est obligatoire ; licence Apache-2.0 ; le skill demande à l'agent de récupérer des docs depuis heroui.com. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: an npm-based React project; Tailwind CSS v4 (mandatory — v3 does not work); nothing paid Install "HeroUI v3 React development guide" for me. It teaches building UIs with HeroUI v3 compound components (Tailwind CSS v4 + React Aria), v3-vs-v2 migration rules, setup, theming with oklch CSS variables, and how to fetch per-component docs before implementing — from @heroui-inc, Apache-2.0 licensed. Repository: https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. Note: the guide documents a curl-piped-to-bash installer — flag it in your report and prefer the npm install path. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "heroui-react". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install @heroui/react and @heroui/react's peers via npm in my project — never run the curl|bash installer blindly). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet React basé sur npm ; Tailwind CSS v4 (obligatoire — la v3 ne fonctionne pas) ; rien de payant Installe-moi « Guide de développement HeroUI v3 React ». Il enseigne la construction d'interfaces avec les composants composés HeroUI v3 (Tailwind CSS v4 + React Aria), les règles de migration v3-vs-v2, la configuration, la thématisation avec variables CSS oklch, et comment récupérer la doc de chaque composant avant d'implémenter — par @heroui-inc, licence Apache-2.0. Dépôt : https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. Note : le guide documente un installateur curl pipé vers bash — signale-le dans ton rapport et préfère la voie d'installation npm. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « heroui-react ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. installer @heroui/react et ses pairs via npm dans mon projet — ne jamais exécuter l'installateur curl|bash à l'aveugle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---
Build UIs with HeroUI v3 compound components on Tailwind CSS v4 and React Aria - **tl_fr:** Construire des interfaces avec les composants composés HeroUI v3 sur Tailwind CSS v4 et React Aria - **creator:** @heroui-inc - **type:** Agent skill - **url:** https://github.com/heroui-inc/heroui - **cat:** Frontend - **kws:** heroui, react, tailwind css, react aria, ui components, design system, oklch, theming - **license:** Apache-2.0 **Description EN:** Curated by Skill Harbor — ⚠️ **Security warning / Avertissement de sécurité** : the guide documents a one-liner install piped from curl into bash (`curl -fsSL https://heroui.com/install | bash — review it before running; the guide also documents an npm alternative`) — **prefer the npm install also documented in the same guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), which is the safe path. Apart from that, this is @heroui-inc's official development guide for HeroUI v3, the React component library on Tailwind CSS v4 and React Aria: v3-vs-v2 migration rules (no provider, compound components, CSS-based animations, semantic variants), framework setup (Next.js App Router, globals.css, PostCSS), component patterns, oklch CSS-variable theming, and helper scripts plus MDX docs to fetch per-component documentation before implementing. Honest caveats: **v3 only** — the guide explicitly warns that v2 patterns do not apply; Tailwind CSS v4 is mandatory; Apache-2.0 licensed; the skill expects the agent to fetch docs from heroui.com. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — ⚠️ **Avertissement de sécurité / Security warning** : le guide documente une installation en une ligne pipée de curl vers bash (`curl -fsSL https://heroui.com — examinez-la avant exécution ; le guide documente aussi une alternative npm/install | bash`) — **préférez l'installation npm également documentée dans le même guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), qui est la voie sûre. À part cela, c'est le guide de développement officiel de @heroui-inc pour HeroUI v3, la bibliothèque de composants React sur Tailwind CSS v4 et React Aria : règles de migration v3-vs-v2 (pas de provider, composants composés, animations en CSS, variantes sémantiques), configuration du framework (Next.js App Router, globals.css, PostCSS), modèles de composants, thématisation via variables CSS oklch, et scripts d'aide plus docs MDX pour récupérer la documentation de chaque composant avant d'implémenter. Bémols honnêtes : **v3 uniquement** — le guide prévient explicitement que les modèles v2 ne s'appliquent pas ; Tailwind CSS v4 est obligatoire ; licence Apache-2.0 ; le skill demande à l'agent de récupérer des docs depuis heroui.com. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: an npm-based React project; Tailwind CSS v4 (mandatory — v3 does not work); nothing paid Install "HeroUI v3 React development guide" for me. It teaches building UIs with HeroUI v3 compound components (Tailwind CSS v4 + React Aria), v3-vs-v2 migration rules, setup, theming with oklch CSS variables, and how to fetch per-component docs before implementing — from @heroui-inc, Apache-2.0 licensed. Repository: https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. Note: the guide documents a curl-piped-to-bash installer — flag it in your report and prefer the npm install path. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "heroui-react". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install @heroui/react and @heroui/react's peers via npm in my project — never run the curl|bash installer blindly). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet React basé sur npm ; Tailwind CSS v4 (obligatoire — la v3 ne fonctionne pas) ; rien de payant Installe-moi « Guide de développement HeroUI v3 React ». Il enseigne la construction d'interfaces avec les composants composés HeroUI v3 (Tailwind CSS v4 + React Aria), les règles de migration v3-vs-v2, la configuration, la thématisation avec variables CSS oklch, et comment récupérer la doc de chaque composant avant d'implémenter — par @heroui-inc, licence Apache-2.0. Dépôt : https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. Note : le guide documente un installateur curl pipé vers bash — signale-le dans ton rapport et préfère la voie d'installation npm. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « heroui-react ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. installer @heroui/react et ses pairs via npm dans mon projet — ne jamais exécuter l'installateur curl|bash à l'aveugle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---
- What
- Build UIs with HeroUI v3 compound components on Tailwind CSS v4 and React Aria - **tl_fr:** Construire des interfaces avec les composants composés HeroUI v3 sur Tailwind CSS v4 et React Aria - **creator:** @heroui-inc - **type:** Agent skill - **url:** https://github.com/heroui-inc/heroui - **cat:** Frontend - **kws:** heroui, react, tailwind css, react aria, ui components, design system, oklch, theming - **license:** Apache-2.0 **Description EN:** Curated by Skill Harbor — ⚠️ **Security warning / Avertissement de sécurité** : the guide documents a one-liner install piped from curl into bash (`curl -fsSL https://heroui.com/install | bash — review it before running; the guide also documents an npm alternative`) — **prefer the npm install also documented in the same guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), which is the safe path. Apart from that, this is @heroui-inc's official development guide for HeroUI v3, the React component library on Tailwind CSS v4 and React Aria: v3-vs-v2 migration rules (no provider, compound components, CSS-based animations, semantic variants), framework setup (Next.js App Router, globals.css, PostCSS), component patterns, oklch CSS-variable theming, and helper scripts plus MDX docs to fetch per-component documentation before implementing. Honest caveats: **v3 only** — the guide explicitly warns that v2 patterns do not apply; Tailwind CSS v4 is mandatory; Apache-2.0 licensed; the skill expects the agent to fetch docs from heroui.com. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — ⚠️ **Avertissement de sécurité / Security warning** : le guide documente une installation en une ligne pipée de curl vers bash (`curl -fsSL https://heroui.com — examinez-la avant exécution ; le guide documente aussi une alternative npm/install | bash`) — **préférez l'installation npm également documentée dans le même guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), qui est la voie sûre. À part cela, c'est le guide de développement officiel de @heroui-inc pour HeroUI v3, la bibliothèque de composants React sur Tailwind CSS v4 et React Aria : règles de migration v3-vs-v2 (pas de provider, composants composés, animations en CSS, variantes sémantiques), configuration du framework (Next.js App Router, globals.css, PostCSS), modèles de composants, thématisation via variables CSS oklch, et scripts d'aide plus docs MDX pour récupérer la documentation de chaque composant avant d'implémenter. Bémols honnêtes : **v3 uniquement** — le guide prévient explicitement que les modèles v2 ne s'appliquent pas ; Tailwind CSS v4 est obligatoire ; licence Apache-2.0 ; le skill demande à l'agent de récupérer des docs depuis heroui.com. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: an npm-based React project; Tailwind CSS v4 (mandatory — v3 does not work); nothing paid Install "HeroUI v3 React development guide" for me. It teaches building UIs with HeroUI v3 compound components (Tailwind CSS v4 + React Aria), v3-vs-v2 migration rules, setup, theming with oklch CSS variables, and how to fetch per-component docs before implementing — from @heroui-inc, Apache-2.0 licensed. Repository: https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. Note: the guide documents a curl-piped-to-bash installer — flag it in your report and prefer the npm install path. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "heroui-react". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install @heroui/react and @heroui/react's peers via npm in my project — never run the curl|bash installer blindly). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet React basé sur npm ; Tailwind CSS v4 (obligatoire — la v3 ne fonctionne pas) ; rien de payant Installe-moi « Guide de développement HeroUI v3 React ». Il enseigne la construction d'interfaces avec les composants composés HeroUI v3 (Tailwind CSS v4 + React Aria), les règles de migration v3-vs-v2, la configuration, la thématisation avec variables CSS oklch, et comment récupérer la doc de chaque composant avant d'implémenter — par @heroui-inc, licence Apache-2.0. Dépôt : https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. Note : le guide documente un installateur curl pipé vers bash — signale-le dans ton rapport et préfère la voie d'installation npm. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « heroui-react ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. installer @heroui/react et ses pairs via npm dans mon projet — ne jamais exécuter l'installateur curl|bash à l'aveugle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---
- Cost
- Free
- Needs
- an npm-based React project; Tailwind CSS v4 (mandatory — v3 does not work); nothing paid
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — ⚠️ **Security warning / Avertissement de sécurité** : the guide documents a one-liner install piped from curl into bash (`curl -fsSL https://heroui.com/install | bash — review it before running; the guide also documents an npm alternative`) — **prefer the npm install also documented in the same guide** (`npm i @heroui/styles @heroui/react tailwind-variants`), which is the safe path. Apart from that, this is @heroui-inc's official development guide for HeroUI v3, the React component library on Tailwind CSS v4 and React Aria: v3-vs-v2 migration rules (no provider, compound components, CSS-based animations, semantic variants), framework setup (Next.js App Router, globals.css, PostCSS), component patterns, oklch CSS-variable theming, and helper scripts plus MDX docs to fetch per-component documentation before implementing. Honest caveats: **v3 only** — the guide explicitly warns that v2 patterns do not apply; Tailwind CSS v4 is mandatory; Apache-2.0 licensed; the skill expects the agent to fetch docs from heroui.com. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: an npm-based React project; Tailwind CSS v4 (mandatory — v3 does not work); nothing paid Install "HeroUI v3 React development guide" for me. It teaches building UIs with HeroUI v3 compound components (Tailwind CSS v4 + React Aria), v3-vs-v2 migration rules, setup, theming with oklch CSS variables, and how to fetch per-component docs before implementing — from @heroui-inc, Apache-2.0 licensed. Repository: https://github.com/heroui-inc/heroui/blob/v3/skills/heroui-react/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. Note: the guide documents a curl-piped-to-bash installer — flag it in your report and prefer the npm install path. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "heroui-react". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. install @heroui/react and @heroui/react's peers via npm in my project — never run the curl|bash installer blindly). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.