インストール

Tailwind CSS v4 必須: Caroa UIはTailwind CSS v4以上が必要です。v3では動作しません。

パッケージのインストール

npm install @caroainc/ui-components

peerDependencies

以下のパッケージが必要です：

# Tailwind CSS v4以上が必須
npm install tailwindcss@^4.0.0 lucide-react framer-motion date-fns react-day-picker react-hook-form react-icons

Tailwind設定

tailwind.config.tsでCaroa UIのPresetを継承します：

import { caroaPreset } from '@caroainc/ui-components/preset'
 
export default {
  presets: [caroaPreset],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@caroainc/ui-components/dist/**/*.js',
  ],
}

CSSのインポート

グローバルCSSでトークンとアニメーションをインポートします：

@import '@caroainc/ui-components/tokens';
@import '@caroainc/ui-components/animations';

GitHub Packagesの認証

@caroaincスコープのパッケージはGitHub Packagesで公開されています。 .npmrcファイルを作成して認証を設定してください：

@caroainc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}