Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

heroui-react

Name: heroui-react
Author: heroui-inc

HeroUI v3のReactコンポーネントライブラリ（Tailwind CSS v4 + React Aria）に関するスキルです。Button・Modal・Form・CardなどのUIコンポーネント作成、`@heroui/react`のインストール、oklch変数を使ったダーク/ライトテーマの設定、またはコンポーネントドキュメントの取得時に使用してください。

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.

SKILL.md 本文

HeroUI v3 React 開発ガイド

HeroUI v3 は Tailwind CSS v4 と React Aria Components 上に構築されたコンポーネントライブラリで、React アプリケーション向けのアクセシブルでカスタマイズ可能な UI コンポーネントを提供します。

インストール

curl -fsSL https://heroui.com/install | bash -s heroui-react

重要: v3 のみ - v2 の知識は無視

このガイドは HeroUI v3 のみです。 v2 のパターンを適用しないでください — プロバイダー、スタイリング、コンポーネント API がすべて変更されました：

機能	v2（使用しないこと）	v3（これを使用）
Provider	`<HeroUIProvider>` 必須	Provider は不要
アニメーション	`framer-motion` パッケージ	CSS ベース、追加依存なし
コンポーネント API	フラット props: `<Card title="x">`	複合型: `<Card><Card.Header>`
スタイリング	Tailwind v3 + `@heroui/theme`	Tailwind v4 + `@heroui/styles`
パッケージ	`@heroui/system`, `@heroui/theme`	`@heroui/react`, `@heroui/styles`

// これはしないでください - v2 パターン
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;

正解（v3 パターン）

// これをしてください - v3 パターン（プロバイダーなし、複合コンポーネント）
import { Card } from "@heroui/react";

<Card>
	<Card.Header>
		<Card.Title>Product</Card.Title>
		<Card.Description>A great product</Card.Description>
	</Card.Header>
</Card>;

実装前に必ず v3 ドキュメントを取得してください。

コア原則

視覚的説明ではなくセマンティック変異型（primary、secondary、tertiary）
設定より構成（複合コンポーネント）
oklch カラースペースを使用した CSS 変数ベースのテーマ設定
予測可能なスタイリング用の BEM 命名規則

ドキュメントとコンポーネント情報へのアクセス

コンポーネントの詳細、例、props、実装パターンについては、常にドキュメントを取得してください：

スクリプトの使用

# 利用可能なすべてのコンポーネントをリスト表示
node scripts/list_components.mjs

# コンポーネントドキュメント（MDX）を取得
node scripts/get_component_docs.mjs Button
node scripts/get_component_docs.mjs Button Card TextField

# コンポーネントソースコードを取得
node scripts/get_source.mjs Button

# コンポーネント CSS スタイル（BEM クラス）を取得
node scripts/get_styles.mjs Button

# テーマ変数を取得
node scripts/get_theme.mjs

# コンポーネント以外のドキュメント（ガイド、リリース）を取得
node scripts/get_docs.mjs /docs/react/getting-started/theming

直接 MDX URL

コンポーネントドキュメント: https://heroui.com/docs/react/components/{component-name}.mdx

例：

Button: https://heroui.com/docs/react/components/button.mdx
Modal: https://heroui.com/docs/react/components/modal.mdx
Form: https://heroui.com/docs/react/components/form.mdx

はじめにガイド: https://heroui.com/docs/react/getting-started/{topic}.mdx

重要： 実装前に必ずコンポーネントドキュメントを取得してください。MDX ドキュメントには完全な例、props、構造、API リファレンスが含まれています。

インストール必須事項

クイックインストール

npm i @heroui/styles @heroui/react tailwind-variants

フレームワーク設定（Next.js App Router - 推奨）

依存関係をインストール：

npm i @heroui/styles @heroui/react tailwind-variants tailwindcss @tailwindcss/postcss postcss

app/globals.css を作成/更新：

/* Tailwind CSS v4 - 最初である必要があります */
@import "tailwindcss";

/* HeroUI v3 スタイル - Tailwind の後である必要があります */
@import "@heroui/styles";

app/layout.tsx にインポート：

import "./globals.css";

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body>
				{/* HeroUI v3 ではプロバイダーは不要です！ */}
				{children}
			</body>
		</html>
	);
}

PostCSS を設定（postcss.config.mjs）：

export default {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

重要な設定要件

Tailwind CSS v4 は必須 - HeroUI v3 は Tailwind CSS v3 では機能しません
複合コンポーネントを使用 - コンポーネントは複合構造を使用します（例：Card.Header、Card.Content）
onPress を使用し、onClick は使用しない - より高いアクセシビリティのため、onPress イベントハンドラーを使用してください
インポート順序が重要 - 常に Tailwind CSS を HeroUI スタイルの前にインポートしてください

コンポーネントパターン

すべてのコンポーネントは、上記に示した複合パターンを使用しており、ドット記法のサブコンポーネント（Card.Header、Card.Content など）があります。props にフラット化しないでください — 常にサブコンポーネントで構成してください。完全な構造と例については、コンポーネントドキュメントを取得してください。

セマンティック変異型

HeroUI は機能的意図を伝えるためにセマンティック命名を使用します：

変異型	目的	使用方法
`primary`	前に進むためのメインアクション	コンテキストごとに1つ
`secondary`	代替アクション	複数
`tertiary`	中止アクション（キャンセル、スキップ）	控えめに
`danger`	破壊的アクション	必要に応じて
`ghost`	低強調アクション	最小限の重さ
`outline`	二次アクション	ボーダー付きスタイル

生の色を使用しないでください - セマンティック変異型はテーマとアクセシビリティに適応します。

テーマ設定

HeroUI v3 は oklch カラースペースを使用した CSS 変数を使用します：

:root {
	--accent: oklch(0.6204 0.195 253.83);
	--accent-foreground: var(--snow);
	--background: oklch(0.9702 0 0);
	--foreground: var(--eclipse);
}

現在のテーマ変数を取得：

node scripts/get_theme.mjs

色命名：

サフィックスなし = 背景（例：--accent）
-foreground 付き = テキスト色（例：--accent-foreground）

テーマの切り替え：

<html class="dark" data-theme="dark"></html>

詳細なテーマ設定については、以下を取得してください：https://heroui.com/docs/react/getting-started/theming.mdx

ライセンス: Apache-2.0(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: heroui-inc
リポジトリ: heroui-inc/heroui
ライセンス: Apache-2.0
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/heroui-inc/heroui / ライセンス: Apache-2.0