Caroa UI

インストール

Caroa UIのインストール方法

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 'tailwindcss';
@config './tailwind.config.ts';
@import '@caroainc/ui-components/tokens';
@import '@caroainc/ui-components/animations';
 
/* caroa-uiコンポーネントで使用されるTailwindクラスをスキャン */
@source "../node_modules/@caroainc/ui-components/dist";

重要: Tailwind v4では@configディレクティブが必須です。これがないとtailwindcss-animateプラグインが読み込まれず、Select・Dialog・Popoverなどのアニメーションが動作しません。

On this page