はじめに

Provider は要りません。CSS を2行 import すれば動きます。

インストール

pnpm add @novi-ui/core @novi-ui/raster react-aria-components

CSS の読み込み

// app/globals.css
@import '@novi-ui/core/base.css';
@import '@novi-ui/raster/raster.css';

/* テーマが出力するクラスを Tailwind に拾わせる */
@source "../node_modules/@novi-ui/raster/dist";

使う

import { Button, Input } from '@novi-ui/raster'

export function SignInForm() {
  return (
    <form>
      <Input label="メールアドレス" type="email" isRequired />
      <Button type="submit" color="primary">送信</Button>
    </form>
  )
}

ラップするものはありません。React Server Components からも型や slot 契約をそのまま import できます。

知っておくと良いこと

props 名は React Aria の慣習に従います: disabled ではなく isDisabled、onClick ではなく onPress です。基盤の props をそのまま流すことで、変換層に起因する a11y のバグを作り込まずに済みます。
ブランド色は CSS 変数で変えられます: --novi-color-primary を上書きすれば、primary を使う全コンポーネントに反映されます。
日本語入力で誤送信しません: Input と TextArea の onKeyDown は IME 変換中のキーを受け取りません。変換確定の Enter でフォームが送信される事故を防げます。