uiM8

Docs

Start

uiM8 is a set of React components you copy into your project. It needs React 19 and Tailwind CSS 4.

01Install

Each component is one file. The shadcn CLI copies it into your project, with the theme and the packages it needs.

npx shadcn@latest add https://ui.netm8.com/r/button.json

To use short names, add the registry to components.json.

{
  "registries": {
    "@uim8": "https://ui.netm8.com/r/{name}.json"
  }
}
npx shadcn@latest add @uim8/dialog @uim8/command

02Use

The files are yours. Import them from where the CLI put them and change what you like.

import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

export function Enter() {
  return (
    <Button>
      Enter <ArrowRight />
    </Button>
  )
}

03Theme

Three colours make the theme: an ink, a paper and a lamp. Every other colour is mixed from them. Two lengths set the pixel grid and the corner radius.

:root {
  --ink: #1d1325;
  --paper: #fff0cd;
  --seed: var(--gold);
  --px: 2px;
  --corner: 0px;
}
  • ground
  • surface
  • raised
  • well
  • line
  • edge
  • faint
  • dim
  • figure
  • shade
  • lamp
  • lamp-deep
  • ok
  • warn
  • bad
  • info

04Tone

Ink tone is the default. Paper tone swaps ground and figure, on the whole page or on one part of it.

<html data-tone="paper">

<article data-tone="paper" className="bg-ground p-8">
  <Card>The letter reads dark on cream, inside a dark page.</Card>
</article>
The studio
One desk, one lamp.
x
lit
The studio
One desk, one lamp.
x
lit

05Lamp

The lamp is the one accent. Five ship with the theme, and any colour can be the seed.

<html data-lamp="rose">

<section data-lamp="sage">
  <Button>Grow</Button>
</section>

06Dither

dither draws any CSS gradient as an ordered dither. stipple-25, 50 and 75 fill with a flat screen.

<div className="dither size-40 [--dither-image:radial-gradient(#fff,#000_70%)]" />

<div className="stipple-50 h-2 text-lamp" />

07Type

Components inherit your body font. Display moments use font-pixel, set here in Geist Pixel.

npm install @fontsource/geist-pixel
@import "@fontsource/geist-pixel";

:root {
  --face-pixel: "Geist Pixel", ui-monospace, monospace;
}