Getting started

Normal UI ships as two npm packages. Both are public and experimental (0.x): attributes and names may change before 1.0. MIT licensed. You need React 19 for the components; the CSS works anywhere.

Plain HTML or any framework

pnpm add @imsus/normal-ui-css

import '@imsus/normal-ui-css'; // tokens + base styles + patterns
import '@imsus/normal-ui-css/themes/govuk.css'; // optional: govuk, mcmaster, usgraphics

Write semantic elements and they already look right. data-color-scheme="light|dark" on <html> forces a color scheme (without it, the device decides); data-theme="<id>" applies a theme. Override any value with your own custom property; your unlayered CSS beats the layers underneath.

React

pnpm add @imsus/normal-ui-react

import '@imsus/normal-ui-css';
import '@imsus/normal-ui-css/themes/govuk.css'; // optional
import '@imsus/normal-ui-react/styles.css';

import { Alert, Button, TextField } from '@imsus/normal-ui-react';

<>
  <Alert kind="warning">3 products are almost out of stock.</Alert>
  <TextField label="Email address" type="email" autoComplete="email" />
  <Button type="submit">Save address</Button>
</>

Components take native props plus className and style (applied after the component's own styles) and xstyle for StyleX users. Interactive components carry 'use client'; importing one into a server-component page is the client boundary. Works in the last 2 Chrome, Firefox, and Safari.