1つの core に、複数の美学。

同じ JSX の Modal を、3つのテーマで開いたところです。Raster は浮き、Tactile はせり上がり、Flatlay は紙ごと差し替わる。変わるのは色や角丸ではなく DOM の組み立て方です。挙動とアクセシビリティは @novi-ui/core が引き受けるので、どれも同じ props、同じキーボード操作で動きます。

import { Button, Modal, ModalBody, ModalFooter, ModalTitle } from '@novi-ui/raster'

<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
  <ModalTitle>注文を確定しますか</ModalTitle>
  <ModalBody>在庫を引き当てて、確認メールを送ります。この操作は取り消せません。</ModalBody>
  <ModalFooter>
    <Button color="primary">確定する</Button>
  </ModalFooter>
</Modal>

右上でテーマを切り替える

ここから下のデモはヘッダーのテーマ選択に追従します。コードは1文字も変わらないまま、見た目だけが変わります。

3つのモデルを並べる

同じ JSX を3つのテーマで同時に描いたものです。違うのは角丸だけではありません。余白の量、要素間の距離の比、字送り、数字の字形——どれもテーマが所有する値です。Raster は 4px グリッドの規律、Tactile は面積、Flatlay は罫線と等幅の見出しが、それぞれの支配軸です。

組み上げるとこうなります

Raster だけで作った管理画面です。面は平らなまま、余白と 1px の線と明度差で階層を作り、浮いている層だけが薄い影を持ちます。 情報密度の高い実務画面が Raster の得意分野です。右上でテーマを切り替えると、この画面ごと別の見た目になります。

このページの外枠がテーマに染まらないのは、比較対象をはっきりさせるための設計です。 実際のアプリは、上のように Novi だけで組めます。

設計の要点

Provider が要らない

テーマは CSS 変数だけで効きます。import してすぐ使えるので、AI が設置を忘れて壊れることがありません。

slot 契約

core は部位の名前だけを決め、JSX は決めません。テーマは構造を自由に組めるのに、公開 API は同一に保たれます。

日本語入力に強い

変換確定の Enter でフォーム送信が暴発する問題を、利用側が意識せずに防げます。

はじめる