@basemorph/ui-react

Token-driven, morph-switchable React primitives built on Base UI. Components carry no color or spacing of their own — they read the CSS variables from @basemorph/tokens, so the same component looks flat, neo-brutalist, or neumorphic purely from the [data-style] on an ancestor.

Install

npm install @basemorph/ui-react @basemorph/tokens

react, react-dom (>=18), and @basemorph/tokens are peer dependencies.

Requirements

The primitives emit Tailwind v4 utility classes that reference the token CSS variables (e.g. var(--color-accent)). To render them you need:

1. Tailwind v4 in the consuming app, with this package included as a source so its classes are generated:

   @import "tailwindcss";
   @source "../node_modules/@basemorph/ui-react/dist";

2. The token stylesheet loaded and a morph selected:

   import "@basemorph/tokens/tokens.css";

   <html data-theme="light" data-style="flat">

For a fully wired setup, scaffold with create-ecn-app rather than assembling this by hand.

Usage

import { Button, cn, PointerHoverProvider } from "@basemorph/ui-react";

<PointerHoverProvider>
  <Button variant="primary" size="md">Save</Button>
</PointerHoverProvider>;

Button accepts variant, size, shape, and forwards a ref plus all native <button> props. cn is the clsx + tailwind-merge class combiner, and the package re-exports its full recipe layer (the styles module) for composing your own token-aware components.

License

MIT © Evan C. Navarro