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

挙動とアクセシビリティは @novi-ui/core が一手に引き受け、テーマは構造とスタイルだけを持ちます。 右上でテーマを切り替えてください。下のコードは1文字も変わらないまま、見た目だけが変わります。

import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Input, Switch } from '@novi-ui/raster'

<Card>
  <CardHeader>アカウント設定</CardHeader>
  <CardBody>
    <Input label="表示名" defaultValue="小島 佑翔" />
    <Switch defaultSelected>メール通知を受け取る</Switch>
    <Badge color="success" withDot>有効</Badge>
  </CardBody>
  <CardFooter>
    <Button variant="outline">キャンセル</Button>
    <Button color="primary">保存</Button>
  </CardFooter>
</Card>

設計の要点

Provider が要らない

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

slot 契約

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

日本語入力に強い

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

サイトそのものも作れます

このページの外枠がテーマに染まらないのは、比較対象をはっきりさせるための設計です。 下はこのサイト自身の UI を Novi だけで組み直したものです。 右上でテーマを切り替えると、この「サイト」ごと別の見た目になります。

はじめる