skills.rest
KKChen666
KKChen666COMMUNITY
Explore all skills by this author →
GitHub

heroui-v2

Implements React UIs with HeroUI v2 components, theming, and provider configuration.

Updated Jun 17, 2026
Search Tags:#theming#react#component library#tailwind css#ui development#heroui#framer motion
One-click install
npx skills add https://github.com/KKChen666/TongXiao --skill heroui-v2-kkchen666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-v2
Source: https://github.com/KKChen666/TongXiao/tree/main/.opencode/skills/heroui-v2
Command: npx skills add https://github.com/KKChen666/TongXiao --skill heroui-v2-kkchen666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building React interfaces with HeroUI v2 requires correct provider setup, Tailwind plugin configuration, and knowledge of the v2-specific flat props API, which differs significantly from v3 and causes frequent integration errors. ## Core Features & Use Cases - Component Implementation Guidance: Covers 47 HeroUI v2 components (Button, Modal, Card, Table, etc.) with correct flat props, onPress handlers, and classNames slot styling. - Setup & Theming: Provides installation steps, HeroUIProvider configuration, Tailwind v3/v4 plugin setup, dark mode via next-themes, and custom semantic color themes. - Live Docs Fetching: Scripts retrieve up-to-date component documentation from v2.heroui.com and list available components. - Use Case: When adding a Modal with form validation to a Next.js app, the Skill ensures you wrap the app in HeroUIProvider, use isOpen/onOpenChange props, and avoid v3 compound-component patterns. ## Quick Start Ask the assistant to build a HeroUI v2 card with a button and modal for your React app, including provider and theme setup.

Frequently Asked Questions about heroui-v2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up HeroUI v2 in a React project?▼

Install @heroui/react and framer-motion, configure the heroui() Tailwind plugin from @heroui/theme, and wrap your app root in HeroUIProvider from @heroui/system. The provider is mandatory in v2 for components to render correctly.

What is the difference between HeroUI v2 and v3?▼

HeroUI v2 requires HeroUIProvider, uses framer-motion for animations, flat props like <Card title="x">, and @heroui/theme with Tailwind v3 or v4. v3 removes the provider, uses compound components, CSS-based animations, and @heroui/styles.

Does HeroUI v2 support Tailwind CSS v4?▼

Yes, since HeroUI v2.8.0. Create a hero.ts file exporting heroui() from @heroui/theme, import it in your CSS after @import "tailwindcss", and switch PostCSS to @tailwindcss/postcss.

How do I enable dark mode in HeroUI v2?▼

Add the dark class to the root HTML element. For Next.js use next-themes with ThemeProvider attribute="class" wrapping HeroUIProvider; for Vite or plain React use the @heroui/use-theme package.

Why is my HeroUI v2 component not styling correctly?▼

Common causes are a missing HeroUIProvider at the app root, the heroui Tailwind plugin not registered, or the @heroui/theme dist path absent from the Tailwind content array. pnpm users also need public-hoist-pattern for @heroui/* in .npmrc.

Related Skills

Explore More Software Engineering Skills→
getprobe-devgetprobe-dev
4

shadcn-ui

Install and customize React UI components via a CLI with Tailwind CSS and Radix UI.

Official
Advanced
terrene-foundationterrene-foundation
1

frontend-integration

Guide frontend integration with Kailash SDK workflows for React and Flutter.

Official
Intermediate
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
abrahamgreysonabrahamgreyson

heroui-react

Build HeroUI v3 React interfaces with component, theming, and documentation support.

Community
Intermediate