One core, several aesthetics

Novi UI is a React component library built on React Aria Components. @novi-ui/core owns behaviour, accessibility and the type contracts. Theme packages own structure and style only, so switching themes changes how the DOM is assembled, not just the colours and corner radii.

The rest of this site is in Japanese. This page covers everything you need to install and use the library; for AI agents there is a machine-readable English summary at llms-en.txt.

Three themes, one API

All three implement the same 29 contracts and expose an identical public API. The same <Modal> becomes three different structures:

Raster@novi-ui/rasterMinimal, Swiss grid: Floats in the centre over a dimmed backdrop. Close is an ✕ at the top right
Tactile@novi-ui/tactileTouch-first, larger surfaces: Rises from the bottom as a sheet. Close is full-width in the footer
Flatlay@novi-ui/flatlayNo z-axis, paper and ruled lines: Replaces the page as a full takeover. Close is “← back” at the top left

You can see all three side by side on the home page.

Install

Requires React 19 and Tailwind CSS v4. A theme’s CSS ships token definitions only; the component classes are generated by your Tailwind. Without Tailwind and the @source line, nothing renders.

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

/* app/globals.css */
@import "tailwindcss";
@import "@novi-ui/core/base.css";
@import "@novi-ui/raster/raster.css";

/* let Tailwind see the classes the theme emits — path is relative to this CSS file */
@source "../node_modules/@novi-ui/raster/dist";

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

export function SignInForm() {
  return (
    <form>
      <Input label="Email" type="email" isRequired />
      <Button type="submit" color="primary">Send</Button>
    </form>
  )
}

No provider is required. Prop names follow React Aria: isDisabled rather than disabled, onPress rather than onClick.

Theme, scheme and colourway

Everything is an attribute on the root element, and all of them are optional.

<html data-novi-theme="raster" data-novi-scheme="dark" data-novi-color="brick">

data-novi-theme — omit it when you import a single theme’s CSS. Use the .scoped.css build to run several themes on one page
data-novi-scheme — light or dark. Omit it to follow the OS setting
data-novi-color — each theme owns 8 colours and the names differ per theme. An unknown name falls back to that theme’s default. See the Lookbook

Using it with AI agents

A skill, a shadcn-compatible registry and an MCP server. All three are generated from the same intermediate representation, so they never drift from the code. The registry injects the @source line too, so the usual failure (everything unstyled) cannot happen.

# Give Claude Code / Cursor / Codex / Copilot the conventions and the component list
npx skills add yuuto22009911-hash/novi --skill novi-ui

# Install through the shadcn CLI (npm install + @import / @source injected into globals.css; no source is copied)
npx shadcn@latest add https://novi-42r.pages.dev/r/raster.json

# MCP server (read-only, offline)
claude mcp add novi-ui -- npx -y @novi-ui/mcp

What is not here yet

DatePicker is not implemented yet; React Aria provides the behaviour, so it is next. There is no column resizing, virtual scrolling or inline editing in Table, and no Slider or file upload. If you need those today another library will be faster. The version is 0.x and the API will change.

Three themes, one API

Install

Theme, scheme and colourway

Using it with AI agents

What is not here yet

Links