heroui-inc/heroui
3 skills20.2k installs90.9k starsGitHub
Install
npx skills add https://github.com/heroui-inc/herouiSkills in this repo
1Heroui ReactHeroUI v3 React component library Tailwind CSS v4 React Aria Use when building UIs with HeroUI creating Buttons Modals Forms Cards installing heroui react configuring dark light themes with oklch variables or fetching component docs Keywords HeroUI Hero UI heroui heroui react heroui styles name heroui-react description HeroUI v3 React component library Tailwind CSS v4 React Aria Use when building UIs with HeroUI creating Buttons Modals Forms Cards installing heroui react configuring dark light themes with oklch variables or fetching component docs Keywords HeroUI Hero UI heroui heroui react heroui styles metadata author heroui version 3 0 1 HeroUI v3 React Development Guide HeroUI v3 is a component library built on Tailwind CSS v4 and React Aria Components providing accessible customizable UI components for React applications Installation bash curl fsSL https heroui com install bash s heroui-react CRITICAL v3 Only Ignore v2 Knowledge This guide is for HeroUI v3 ONLY Do NOT apply v2 patterns the provider styling and component API all changed Feature v2 DO NOT USE v3 USE9.1kinstalls2Heroui NativeThe heroui-native skill guides development with HeroUI Native, a React Native component library built on Uniwind Tailwind CSS for React Native. It covers installing heroui-native via the official curl installer, using components like Button, Card, TextField, and Dialog, and configuring dark and light themes. Critical guidance separates Native from web HeroUI React patterns because package names, styling engines, and color formats differ. Native uses heroui-native with HSL colors and Uniwind while web uses @heroui/react with oklch on browsers. The skill fetches component documentation when building mobile UIs and warns against applying web HeroUI patterns to React Native code. Platform support targets iOS and Android applications. Use when building mobile UIs with HeroUI Native, installing the library, configuring themes, or fetching native component docs.8.3kinstalls3Heroui MigrationThe heroui-migration skill guides agents upgrading HeroUI v2 applications to v3 with breaking API changes. v3 removes HeroUIProvider, adopts compound components like Card.Header instead of flat props, switches onClick to onPress, replaces classNames with className, and consolidates packages to @heroui/react and @heroui/styles with Tailwind v4. Agents must fetch migration docs before applying changes via node scripts such as get_migration_guide.mjs, get_component_migration_guides.mjs, get_styling_migration_guide.mjs, and get_hooks_migration_guide.mjs. Full migration rewrites all components before switching dependencies, while incremental migration uses pnpm aliases so v2 and v3 coexist during gradual rollout. The workflow runs analyze imports, migrate component batches with per-component guides, switch dependencies, then apply styling updates. Preview docs live on a Vercel staging base URL overridable with HEROUI_MIGRATION_DOCS_BASE; an MCP server at migration-mcp.heroui.com offers tool-based access in Cursor.2.8kinstalls