使い方

Server Components vs Client Components

Next.js App Routerでは、コンポーネントの種類に応じてインポート先を分けます。

Server Components

プレゼンテーショナルなコンポーネントは/serverからインポート：

import { Button, Card, Badge, Input } from '@caroainc/ui-components/server'
 
export default function Page() {
  return (
    <Card>
      <Button>送信</Button>
    </Card>
  )
}

Client Components

インタラクティブなコンポーネントは/clientからインポート：

'use client'
 
import { Dialog, Tabs, Select } from '@caroainc/ui-components/client'

カラーバリアント

Caroa UIのカラーバリアントは以下のルールに従います：

バリアント	色	用途
`base`（デフォルト）	黒	通常のUI要素
`primary`	オレンジ	CTA、重要なアクション
`destructive`	赤	削除、危険な操作
`success`	緑	成功、完了
`warning`	黄	警告、注意

<Button>通常</Button>
<Button variant="primary">重要</Button>
<Button variant="destructive">削除</Button>

フォーム連携

react-hook-formと連携したフォームコンポーネント：

'use client'
 
import { useForm } from 'react-hook-form'
import { Form, FormField, FormItem, FormLabel, FormControl } from '@caroainc/ui-components/form'
import { Input, Button } from '@caroainc/ui-components/server'
 
export function MyForm() {
  const form = useForm()
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>メール</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">送信</Button>
      </form>
    </Form>
  )
}

使い方

Server Components vs Client Components

Server Components

Client Components

カラーバリアント

フォーム連携

On this page