Introduction

The idea

Most component libraries give you a fixed visual language or a pile of unstyled primitives. This kit sits in between: behavior and accessibility come from Base UI, while the visual language is owned here — semantic tokens, solid fills, a top-lit curved edge and a restrained motion system.

There are no gray outlined boxes. Depth comes from tonal surfaces, a light rim on the top edge and a barely-there vertical gradient. The accent is generated from one color, so the whole system re-tones without hand-editing every variable.

Three ideas

Quick start

Install the package, import the stylesheet once, and scope your app with data-ui="kit".

import "@nphuonha/ui-kit/styles.css";
import { Button, Input } from "@nphuonha/ui-kit";

export function Example() {
  return (
    <div data-ui="kit" className="flex gap-2">
      <Input placeholder="Email" />
      <Button>Continue</Button>
    </div>
  );
}

Put data-ui="kit" on <html> when you use portalled overlays, so dialogs, sheets and popovers inherit the tokens.

Start here