@novless-jp/kernel-react

React adapter for Kernel.

@novless-jp/kernel-react provides React components that correspond to Kernel's standard UI and design rules.

Kernel Core is provided separately by:

@novless-jp/kernel

Installation

npm install @novless-jp/kernel @novless-jp/kernel-react

Styles

React components use the styles provided by Kernel Core.

Import the compiled Kernel CSS from your application entry point.

import "@novless-jp/kernel/styles.css";

There is no separate React stylesheet.

Usage

import {
  Badge,
  Button,
  Checkbox,
  Container,
  Icon,
  Input,
  Radio,
  Typography,
} from "@novless-jp/kernel-react";

Typography

Typography applies Kernel's typography rules without defining document semantics.

<h1>
  <Typography
    variant="peak"
    weight="bold"
  >
    Beautiful Web
  </Typography>
</h1>

Typography renders a span.

Semantic elements such as h1, p, label, and other document structure remain the responsibility of the consuming project.

Badge

<Badge variant="required">
  必須
</Badge>

<Badge variant="optional">
  任意
</Badge>

Kernel provides the standard variants and their appearance.

Projects may use Kernel's standard design as-is or create their own component when the Kernel implementation is not appropriate.

Icon

<Icon type="search" />

Kernel icons use the icon styles and assets provided by Kernel Core.

The default icon size is 24px.

When another component owns the icon layout, that component may control the icon size.

Button

<Button>
  Button
</Button>

Design Relationship

Kernel React components are adapters for Kernel's standard implementation.

The goal is to maintain a close relationship between:

Kernel Figma Design System
        ↕
@novless-jp/kernel
        ↕
@novless-jp/kernel-react

Using Kernel's standard components allows design and implementation to correspond closely, reducing duplicated decisions and improving maintainability.

Kernel provides an opinionated standard, but projects are not required to use a Kernel component when its standard design is not suitable.

Package Structure

@novless-jp/kernel-react
└─ React components

@novless-jp/kernel
├─ Core SCSS
├─ Compiled CSS
├─ Design tokens
├─ Fonts
└─ SCSS tools

License

Kernel is released under the MIT License.

See LICENSE for details.